A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
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.
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
OptionaloverlayOptionalcontentOptionalcustom
ScreenboardModal - Modal for annotating on shared screen in real-time
Component
Description
Provides drawing/annotation tools for marking up a shared screen during screen sharing. Displays canvas overlay for annotations that are visible to all participants.
Supports three levels of customization:
Key Features:
Selector
app-screenboard-modal
Standalone
true
Imports
CommonModule, FormsModule, FontAwesomeModule
Input
parameters - Object containing screen stream, annotation settings, and MediaSoup transport methods. Default:
{}Input
isVisible - Whether the modal is currently visible. Default:
falseInput
onClose - Callback function to close the modal. Default:
() => {}Input
position - Modal position on screen ('topRight', 'fullscreen', etc.). Default:
'topRight'Input
backgroundColor - Background color of the modal content. Default:
'#83c0e9'Input
overlayStyle - Custom CSS styles for the modal overlay backdrop. Default:
undefinedInput
contentStyle - Custom CSS styles for the modal content container. Default:
undefinedInput
customTemplate - Custom TemplateRef to completely replace default modal template. Default:
undefinedMethod
ngOnInit - Initializes component (non-view dependent logic)
Method
ngOnDestroy - Cleanup: stops annotations and removes intervals
Method
ngOnChanges - Updates modal state when visibility changes
Method
ngAfterViewInit - Sets up canvas and video elements after view init
Method
showModal - Shows modal and initializes screen annotation
Method
hideModal - Hides modal and cleans up annotation resources
Method
annotationPreview - Handles real-time annotation preview rendering
Method
handleScreenTransport - Manages screen share transport logic
Method
stopAnnotation - Stops annotation intervals and resets canvas
Method
stopAllTracks - Stops all media tracks in cloned screen stream
Method
getCombinedOverlayStyle - Merges default and custom overlay styles
Method
getCombinedContentStyle - Merges default and custom content styles