Class MainContainerComponent

MainContainerComponent dynamically adjusts its styles based on input properties and window size, providing a responsive container for content.

app-main-container-component

true

CommonModule

<div [ngStyle]="containerStyles">
<ng-content></ng-content>
</div>
  • backgroundColor (string): Background color of the container.
  • containerWidthFraction (number): Fraction of the window width the container should occupy. Default is 1.
  • containerHeightFraction (number): Fraction of the window height the container should occupy. Default is 1.
  • marginLeft (number): Left margin of the container in pixels.
  • marginRight (number): Right margin of the container in pixels.
  • marginTop (number): Top margin of the container in pixels.
  • marginBottom (number): Bottom margin of the container in pixels.
  • padding (number): Padding inside the container in pixels.
  • ngOnInit(): Initializes the component, sets up event listeners for resize and orientation changes, and updates container styles.
  • ngOnChanges(changes: SimpleChanges): Updates container styles when input properties change.
  • ngOnDestroy(): Removes event listeners to avoid memory leaks.
  • updateContainerStyles(): Computes and applies styles to the container based on current window size and input properties.
<app-main-container-component
[backgroundColor]="'lightgrey'"
[containerWidthFraction]="0.8"
[containerHeightFraction]="0.9"
[marginLeft]="10"
[marginTop]="15"
[padding]="5"
></app-main-container-component>

Implements

  • OnInit
  • OnDestroy
  • OnChanges

Constructors

Methods

Properties

backgroundColor: string = ''
containerWidthFraction: number = 1
containerHeightFraction: number = 1
marginLeft: number = 0
marginRight: number = 0
marginTop: number = 0
marginBottom: number = 0
padding: number = 0
containerStyles: {
    [key: string]: any;
} = {}