A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
The changed properties.
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
OptionalcontainerOptionalcustom
MainScreenComponent dynamically displays a main screen area with responsive dimensions, adjustable layout, and stacking options based on the screen size and input properties.
Selector
app-main-screen-component
Standalone
true
Imports
CommonModule
Template
Inputs
mainSize(number): Percentage size of the main component. Default is 40.doStack(boolean): Determines if components should be stacked. Default is true.containerWidthFraction(number): Fraction of the container width to use. Default is 1.containerHeightFraction(number): Fraction of the container height to use. Default is 1.defaultFraction(number): Default height fraction for the container when controls are shown. Default is 0.94.showControls(boolean): If true, shows control elements, affecting container height. Default is true.updateComponentSizes(function): Callback for updating component sizes.@ContentChildren('child') children - Query list of child elements within the component.
Properties
containerStyle: Returns a style object for the container based on dimensions and layout options.Methods
ngOnInit(): Initializes the component and sets up event listeners for window resize and orientation changes.ngOnChanges(changes: SimpleChanges): Updates dimensions and layout if any relevant inputs change.ngOnDestroy(): Removes event listeners to prevent memory leaks.ngAfterViewInit(): Applies computed styles to child elements after view initialization.computeDimensions(): Calculates the dimensions for main and secondary components based on current layout settings.updateDimensions(): Updates component dimensions based on window size and input properties.applyChildStyles(): Applies computed styles to child components.Example