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> Copy
<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
.progress-timer
.progress-timer-text
meetingProgressTime
initialBackgroundColor
position
textStyle
showTimer
ngOnChanges(changes: SimpleChanges)
<app-meeting-progress-timer [meetingProgressTime]="'10:30'" [initialBackgroundColor]="'blue'" [position]="'bottomRight'" [textStyle]="{ color: 'white', fontWeight: 'bold' }" [showTimer]="true"></app-meeting-progress-timer> Copy
<app-meeting-progress-timer [meetingProgressTime]="'10:30'" [initialBackgroundColor]="'blue'" [position]="'bottomRight'" [textStyle]="{ color: 'white', fontWeight: 'bold' }" [showTimer]="true"></app-meeting-progress-timer>
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.
The changed properties.
MeetingProgressTimer displays a customizable timer badge to track meeting progress time.
Selector
app-meeting-progress-timer
Standalone
true
Imports
CommonModule
Template
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