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.
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.
Returns void
ngOnChanges
ngOnChanges(changes): void
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.
Parameters
changes: SimpleChanges
The changed properties.
Returns void
ngOnDestroy
ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.
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