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.
MainAspectComponent dynamically adjusts its aspect ratio based on window size, providing an adaptable container for content. It listens for window resize and orientation changes to update its layout, making it suitable for responsive applications.
Selector
app-main-aspect-component
Standalone
true
Imports
CommonModule
Template
Styles
.aspect-container: Styles for overflow handling.Inputs
backgroundColor(string): The background color of the aspect container.showControls(boolean): Toggles control display, adjusting the container height. Default is true.containerWidthFraction(number): Fraction of window width for container width. Default is 1.containerHeightFraction(number): Fraction of window height for container height. Default is 1.defaultFraction(number): Height adjustment factor when controls are shown. Default is 0.94.updateIsWideScreen(function): Callback to set wide screen status.updateIsMediumScreen(function): Callback to set medium screen status.updateIsSmallScreen(function): Callback to set small screen status.Methods
ngOnInit(): Initializes component and sets up resize and orientation listeners.ngOnChanges(changes: SimpleChanges): Updates layout when relevant inputs change.ngOnDestroy(): Removes event listeners to prevent memory leaks.updateAspectStyles(): Calculates and applies styles based on current window dimensions and component inputs.Example