Class MeetingProgressTimer

MeetingProgressTimer displays a customizable timer badge to track meeting progress time.

app-meeting-progress-timer

true

CommonModule

<div [ngStyle]="positions[position]" class="badge-container">
<div [ngStyle]="{ backgroundColor: initialBackgroundColor, display: showTimer ? 'block' : 'none' }" class="progress-timer">
<span [ngStyle]="textStyle" class="progress-timer-text">{{ meetingProgressTime }}</span>
</div>
</div>
  • .badge-container: General container style with positioning.
  • .progress-timer: Timer badge with default padding, background, and border-radius.
  • .progress-timer-text: Text styling within the timer badge.
  • meetingProgressTime (string): Time to be displayed in the timer.
  • initialBackgroundColor (string): Background color of the timer badge. Default is 'green'.
  • position ('topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'): Position of the timer on the screen. Default is 'topLeft'.
  • textStyle (object): Custom styles for the timer text.
  • showTimer (boolean): If true, displays the timer. Default is true.
  • ngOnChanges(changes: SimpleChanges): Handles changes to input properties and updates styles accordingly.
<app-meeting-progress-timer
[meetingProgressTime]="'10:30'"
[initialBackgroundColor]="'blue'"
[position]="'bottomRight'"
[textStyle]="{ color: 'white', fontWeight: 'bold' }"
[showTimer]="true"
></app-meeting-progress-timer>

Implements

  • OnChanges

Constructors

Methods

Properties

meetingProgressTime: string
initialBackgroundColor: string = 'green'
position:
    | "topLeft"
    | "topRight"
    | "bottomLeft"
    | "bottomRight" = 'topLeft'
textStyle: {
    [key: string]: string | number;
} = {}
showTimer: boolean = true
positions: {
    [key: string]: {
        position: string;
        top?: string;
        bottom?: string;
        left?: string;
        right?: string;
    };
} = ...