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.

Selector

app-main-screen-component

Standalone

true

Imports

CommonModule

Template

<div [ngStyle]="containerStyle">
  <ng-content></ng-content>
</div>

Inputs

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.

Properties

containerStyle: Returns a style object for the container based on dimensions and layout options.

Methods

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.

Example

<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

containerStyle

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
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:181

Constructors

constructor

new MainScreenComponent(renderer): MainScreenComponent
Parameters
- renderer: Renderer2
Returns MainScreenComponent
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:108

Methods

updateComponentSizes

updateComponentSizes(sizes): void
Parameters
- sizes: ComponentSizes
Returns void
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:97

ngOnInit

ngOnInit(): void
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
Implementation of OnInit.ngOnInit
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:110

ngOnDestroy

ngOnDestroy(): void
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.

Returns void
Implementation of OnDestroy.ngOnDestroy
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:117

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
Implementation of OnChanges.ngOnChanges
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:122

ngAfterViewInit

ngAfterViewInit(): void
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

Returns void
Implementation of AfterViewInit.ngAfterViewInit
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:135

computeDimensions

computeDimensions(): {
    mainHeight: number;
    otherHeight: number;
    mainWidth: number;
    otherWidth: number;
}
Returns {
    mainHeight: number;
    otherHeight: number;
    mainWidth: number;
    otherWidth: number;
}
- mainHeight: number
- otherHeight: number
- mainWidth: number
- otherWidth: number
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:139

updateDimensions

updateDimensions(): void
Returns void
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:164

applyChildStyles

applyChildStyles(): void
Returns void
- Defined in src/lib/components/display-components/main-screen-component/main-screen-component.component.ts:193

Properties

mainSize

mainSize: number = 40

doStack

doStack: boolean = true

containerWidthFraction

containerWidthFraction: number = 1

containerHeightFraction

containerHeightFraction: number = 1

defaultFraction

defaultFraction: number = 0.94

showControls

showControls: boolean = true

children

children: QueryList<ElementRef<any>>

parentWidth

parentWidth: number

parentHeight

parentHeight: number

isWideScreen

isWideScreen: boolean

Class MainScreenComponent

Selector

Standalone

Imports

Template

Inputs

Properties

Methods

Example

Implements

Index

Accessors

Constructors

Methods

Properties

Accessors

containerStyle

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

constructor

Parameters

Returns MainScreenComponent

Methods

updateComponentSizes

Parameters

Returns void

ngOnInit

Returns void

ngOnDestroy

Returns void

ngOnChanges

Parameters

Returns void

ngAfterViewInit

Returns void

computeDimensions

Returns { mainHeight: number; otherHeight: number; mainWidth: number; otherWidth: number; }

mainHeight: number

otherHeight: number

mainWidth: number

otherWidth: number

updateDimensions

Returns void

applyChildStyles

Returns void

Properties

mainSize

doStack

containerWidthFraction

containerHeightFraction

defaultFraction

showControls

children

parentWidth

parentHeight

isWideScreen

Settings

On This Page

Returns {
display: string;
flex: number;
flexDirection: string;
width: string;
height: string;
padding: number;
margin: number;
}

Returns {
mainHeight: number;
otherHeight: number;
mainWidth: number;
otherWidth: number;
}