Class SubAspectComponent

SubAspectComponent is an Angular component that displays a sub-aspect of a media element with customizable dimensions and background color. The component adapts its size and visibility based on the provided properties and listens for window resize and orientation change events.

app-sub-aspect-component

true

CommonModule

<app-sub-aspect-component [backgroundColor]="'blue'" [showControls]="true" [containerWidthFraction]="0.8"></app-sub-aspect-component>

backgroundColor - The background color of the component. Default is 'transparent'.

showControls - Determines if controls are shown within the component. Default is true.

containerWidthFraction - Fraction of the window width for the component width. Default is 1.

containerHeightFraction - Fraction of the window height for the component height. Default is 1.

defaultFractionSub - The default fraction for the sub-aspect height. Default is 0.0.

ngOnInit - Initializes the component and adds event listeners for responsive adjustments.

ngOnChanges - Updates the aspect styles when any of the input properties change.

ngOnDestroy - Removes event listeners when the component is destroyed.

updateAspectStyles - Calculates and applies updated styles based on the window size and input properties.

Implements

  • OnInit
  • OnDestroy
  • OnChanges

Constructors

Methods

Properties

backgroundColor: string = 'transparent'
showControls: boolean = true
containerWidthFraction: number = 1
containerHeightFraction: number = 1
defaultFractionSub: number = 0.0
aspectStyles: {
    height: number;
    width: number;
} = ...

Contains calculated styles for the component's height and width.