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.
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