Class MainGridComponent

MainGridComponent displays a customizable grid container with an optional meeting progress timer.

app-main-grid-component

true

CommonModule, MeetingProgressTimer

<div [ngStyle]="maingridContainerStyle">
<app-meeting-progress-timer
*ngIf="showTimer"
[meetingProgressTime]="meetingProgressTime"
[initialBackgroundColor]="timeBackgroundColor"
></app-meeting-progress-timer>
<ng-content></ng-content>
</div>
  • backgroundColor (string): Background color of the grid container. Default is an empty string.
  • mainSize (number): Main size of the grid container, used for layout adjustments.
  • height (number): Height of the grid container in pixels.
  • width (number): Width of the grid container in pixels.
  • showAspect (boolean): If true, displays the grid container in flex layout. Default is true.
  • timeBackgroundColor (string): Background color of the meeting progress timer. Default is 'green'.
  • showTimer (boolean): If true, displays the meeting progress timer. Default is true.
  • meetingProgressTime (string): Time displayed in the meeting progress timer.
  • maingridContainerStyle: Returns a style object for the grid container, including display, color, dimensions, and border styling.
<app-main-grid-component
[backgroundColor]="'lightgrey'"
[height]="500"
[width]="500"
[showAspect]="true"
[timeBackgroundColor]="'blue'"
[showTimer]="true"
[meetingProgressTime]="'10:45'"
></app-main-grid-component>

Accessors

  • get maingridContainerStyle(): {
        display: string;
        backgroundColor: string;
        height: string;
        width: string;
        flexDirection: string;
        justifyContent: string;
        alignItems: string;
        borderStyle: string;
        borderColor: string;
        borderWidth: string;
    }
  • Returns {
        display: string;
        backgroundColor: string;
        height: string;
        width: string;
        flexDirection: string;
        justifyContent: string;
        alignItems: string;
        borderStyle: string;
        borderColor: string;
        borderWidth: string;
    }

    • display: string
    • backgroundColor: string
    • height: string
    • width: string
    • flexDirection: string
    • justifyContent: string
    • alignItems: string
    • borderStyle: string
    • borderColor: string
    • borderWidth: string

Constructors

Properties

backgroundColor: string = ''
mainSize: number = 0
height: number = 0
width: number = 0
showAspect: boolean = true
timeBackgroundColor: string = 'green'
showTimer: boolean = true
meetingProgressTime: string = '0'