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.
MainContainerComponent dynamically adjusts its styles based on input properties and window size, providing a responsive container for content.
Selector
app-main-container-component
Standalone
true
Imports
CommonModule
Template
Inputs
backgroundColor(string): Background color of the container.containerWidthFraction(number): Fraction of the window width the container should occupy. Default is 1.containerHeightFraction(number): Fraction of the window height the container should occupy. Default is 1.marginLeft(number): Left margin of the container in pixels.marginRight(number): Right margin of the container in pixels.marginTop(number): Top margin of the container in pixels.marginBottom(number): Bottom margin of the container in pixels.padding(number): Padding inside the container in pixels.Methods
ngOnInit(): Initializes the component, sets up event listeners for resize and orientation changes, and updates container styles.ngOnChanges(changes: SimpleChanges): Updates container styles when input properties change.ngOnDestroy(): Removes event listeners to avoid memory leaks.updateContainerStyles(): Computes and applies styles to the container based on current window size and input properties.Example