Class MainScreenComponent

MainScreenComponent dynamically displays a main screen area with responsive dimensions, adjustable layout, and stacking options based on the screen size and input properties.

app-main-screen-component

true

CommonModule

<div [ngStyle]="containerStyle">
<ng-content></ng-content>
</div>
  • mainSize (number): Percentage size of the main component. Default is 40.
  • doStack (boolean): Determines if components should be stacked. Default is true.
  • containerWidthFraction (number): Fraction of the container width to use. Default is 1.
  • containerHeightFraction (number): Fraction of the container height to use. Default is 1.
  • defaultFraction (number): Default height fraction for the container when controls are shown. Default is 0.94.
  • showControls (boolean): If true, shows control elements, affecting container height. Default is true.
  • updateComponentSizes (function): Callback for updating component sizes.

@ContentChildren('child') children - Query list of child elements within the component.

  • containerStyle: Returns a style object for the container based on dimensions and layout options.
  • ngOnInit(): Initializes the component and sets up event listeners for window resize and orientation changes.
  • ngOnChanges(changes: SimpleChanges): Updates dimensions and layout if any relevant inputs change.
  • ngOnDestroy(): Removes event listeners to prevent memory leaks.
  • ngAfterViewInit(): Applies computed styles to child elements after view initialization.
  • computeDimensions(): Calculates the dimensions for main and secondary components based on current layout settings.
  • updateDimensions(): Updates component dimensions based on window size and input properties.
  • applyChildStyles(): Applies computed styles to child components.
<app-main-screen-component
[mainSize]="60"
[doStack]="false"
[containerWidthFraction]="0.8"
[containerHeightFraction]="0.9"
[defaultFraction]="0.9"
[showControls]="true"
[updateComponentSizes]="onUpdateSizes"
>
<div #child>Child Component</div>
</app-main-screen-component>

Implements

  • OnInit
  • OnChanges
  • AfterViewInit
  • OnDestroy

Accessors

  • get containerStyle(): {
        display: string;
        flex: number;
        flexDirection: string;
        width: string;
        height: string;
        padding: number;
        margin: number;
    }
  • Returns {
        display: string;
        flex: number;
        flexDirection: string;
        width: string;
        height: string;
        padding: number;
        margin: number;
    }

    • display: string
    • flex: number
    • flexDirection: string
    • width: string
    • height: string
    • padding: number
    • margin: number

Constructors

Methods

Properties

mainSize: number = 40
doStack: boolean = true
containerWidthFraction: number = 1
containerHeightFraction: number = 1
defaultFraction: number = 0.94
showControls: boolean = true
children: QueryList<ElementRef<any>>
parentWidth: number
parentHeight: number
isWideScreen: boolean