Class MeetingProgressTimer

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

Selector

app-meeting-progress-timer

Standalone

true

Imports

CommonModule

Template

<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>

Styles

  • .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.

Inputs

  • 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.

Methods

  • ngOnChanges(changes: SimpleChanges): Handles changes to input properties and updates styles accordingly.

Example

<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

constructor

Methods

ngOnChanges

Properties

meetingProgressTime initialBackgroundColor position textStyle showTimer positions

Constructors

constructor

Methods

ngOnChanges

Properties

meetingProgressTime

meetingProgressTime: string

initialBackgroundColor

initialBackgroundColor: string = 'green'

position

position:
    | "topLeft"
    | "topRight"
    | "bottomLeft"
    | "bottomRight" = 'topLeft'

textStyle

textStyle: {
    [key: string]: string | number;
} = {}

showTimer

showTimer: boolean = true

positions

positions: {
    [key: string]: {
        position: string;
        top?: string;
        bottom?: string;
        left?: string;
        right?: string;
    };
} = ...

Settings

Member Visibility

On This Page

Constructors
Methods
Properties