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 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 performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
OptionalcontainerOptionalcustom
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