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.
OptionalaccentOptionalalignOptionalalignOptionalalignOptionalalignmentOptionalall?: stringOptionalanimation?: stringOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalappearance?: stringOptionalaspectOptionalbackdropOptionalbackfaceOptionalbackground?: stringOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbaselineOptionalbaselineOptionalblockOptionalborder?: stringOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalbottom?: stringOptionalboxOptionalboxOptionalbreakOptionalbreakOptionalbreakOptionalcaptionOptionalcaretOptionalclear?: stringOptionalclip?: stringOptionalclipOptionalclipOptionalcolor?: stringOptionalcolorOptionalcolorOptionalcolorOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumns?: stringOptionalcontain?: stringOptionalcontainOptionalcontainOptionalcontainOptionalcontainOptionalcontainOptionalcontainer?: stringOptionalcontainerOptionalcontainerOptionalcontent?: stringOptionalcontentOptionalcounterOptionalcounterOptionalcounterOptionalcssOptionalcssOptionalcursor?: stringOptionalcx?: stringOptionalcy?: stringOptionald?: stringOptionaldirection?: stringOptionaldominantOptionalemptyOptionalfill?: stringOptionalfillOptionalfillOptionalfilter?: stringOptionalflex?: stringOptionalflexOptionalflexOptionalflexOptionalflexOptionalflexOptionalflexOptionalfloat?: stringOptionalfloodOptionalfloodOptionalfont?: stringOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalforcedOptionalgap?: stringOptionalgrid?: stringOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalhyphenateOptionalhyphens?: stringOptionalimageOptionalimageOptionalinlineOptionalinset?: stringOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalisolation?: stringOptionaljustifyOptionaljustifyOptionaljustifyOptional Readonlylength?: numberOptionalletterOptionallightingOptionallineOptionallineOptionallistOptionallistOptionallistOptionallistOptionalmargin?: stringOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarker?: stringOptionalmarkerOptionalmarkerOptionalmarkerOptionalmask?: stringOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmathOptionalmathOptionalmaxOptionalmaxOptionalmaxOptionalmaxOptionalminOptionalminOptionalminOptionalminOptionalmixOptionalobjectOptionalobjectOptionaloffset?: stringOptionaloffsetOptionaloffsetOptionaloffsetOptionaloffsetOptionaloffsetOptionalopacity?: stringOptionalorder?: stringOptionalorphans?: stringOptionaloutline?: stringOptionaloutlineOptionaloutlineOptionaloutlineOptionaloutlineOptionaloverflow?: stringOptionaloverflowOptionaloverflowOptionaloverflowOptionaloverflowX?: stringOptionaloverflowY?: stringOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionalpadding?: stringOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpage?: stringOptionalpageOptionalpageOptionalpageOptionalpaintOptional ReadonlyparentOptionalperspective?: stringOptionalperspectiveOptionalplaceOptionalplaceOptionalplaceOptionalpointerOptionalprintOptionalquotes?: stringOptionalr?: stringOptionalresize?: stringOptionalright?: stringOptionalrotate?: stringOptionalrowOptionalrubyOptionalrx?: stringOptionalry?: stringOptionalscale?: stringOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollbarOptionalscrollbarOptionalscrollbarOptionalshapeOptionalshapeOptionalshapeOptionalshapeOptionalstopOptionalstopOptionalstroke?: stringOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionaltabOptionaltableOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltouchOptionaltransform?: stringOptionaltransformOptionaltransformOptionaltransformOptionaltransition?: stringOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltranslate?: stringOptionalunicodeOptionaluserOptionalvectorOptionalverticalOptionalvisibility?: stringOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwhiteOptionalwhiteOptionalwidows?: stringOptionalwillOptionalwordOptionalwordOptionalwordOptionalwritingOptionalx?: stringOptionaly?: stringOptionalzoom?: stringOptionalaccentOptionalalignOptionalalignOptionalalignOptionalalignmentOptionalall?: stringOptionalanimation?: stringOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalanimationOptionalappearance?: stringOptionalaspectOptionalbackdropOptionalbackfaceOptionalbackground?: stringOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbaselineOptionalbaselineOptionalblockOptionalborder?: stringOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalboxOptionalboxOptionalbreakOptionalbreakOptionalbreakOptionalcaptionOptionalcaretOptionalclear?: stringOptionalclip?: stringOptionalclipOptionalclipOptionalcolor?: stringOptionalcolorOptionalcolorOptionalcolorOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumns?: stringOptionalcontain?: stringOptionalcontainOptionalcontainOptionalcontainOptionalcontainOptionalcontainOptionalcontainer?: stringOptionalcontainerOptionalcontainerOptionalcontent?: stringOptionalcontentOptionalcounterOptionalcounterOptionalcounterOptionalcssOptionalcssOptionalcursor?: stringOptionalcx?: stringOptionalcy?: stringOptionald?: stringOptionaldirection?: stringOptionaldisplay?: stringOptionaldominantOptionalemptyOptionalfill?: stringOptionalfillOptionalfillOptionalfilter?: stringOptionalflex?: stringOptionalflexOptionalflexOptionalflexOptionalflexOptionalflexOptionalflexOptionalfloat?: stringOptionalfloodOptionalfloodOptionalfont?: stringOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalforcedOptionalgap?: stringOptionalgrid?: stringOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalheight?: stringOptionalhyphenateOptionalhyphens?: stringOptionalimageOptionalimageOptionalinlineOptionalinset?: stringOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalisolation?: stringOptionaljustifyOptionaljustifyOptionaljustifyOptional Readonlylength?: numberOptionalletterOptionallightingOptionallineOptionallineOptionallistOptionallistOptionallistOptionallistOptionalmargin?: stringOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarker?: stringOptionalmarkerOptionalmarkerOptionalmarkerOptionalmask?: stringOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmathOptionalmathOptionalmaxOptionalmaxOptionalmaxOptionalminOptionalminOptionalminOptionalminOptionalmixOptionalobjectOptionalobjectOptionaloffset?: stringOptionaloffsetOptionaloffsetOptionaloffsetOptionaloffsetOptionaloffsetOptionalopacity?: stringOptionalorder?: stringOptionalorphans?: stringOptionaloutline?: stringOptionaloutlineOptionaloutlineOptionaloutlineOptionaloutlineOptionaloverflow?: stringOptionaloverflowOptionaloverflowOptionaloverflowOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpage?: stringOptionalpageOptionalpageOptionalpageOptionalpaintOptional ReadonlyparentOptionalperspective?: stringOptionalperspectiveOptionalplaceOptionalplaceOptionalplaceOptionalpointerOptionalprintOptionalquotes?: stringOptionalr?: stringOptionalresize?: stringOptionalrotate?: stringOptionalrowOptionalrubyOptionalrx?: stringOptionalry?: stringOptionalscale?: stringOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollbarOptionalscrollbarOptionalscrollbarOptionalshapeOptionalshapeOptionalshapeOptionalshapeOptionalstopOptionalstopOptionalstroke?: stringOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionaltabOptionaltableOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltouchOptionaltransform?: stringOptionaltransformOptionaltransformOptionaltransformOptionaltransition?: stringOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltranslate?: stringOptionalunicodeOptionaluserOptionalvectorOptionalverticalOptionalvisibility?: stringOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwhiteOptionalwhiteOptionalwidows?: stringOptionalwillOptionalwordOptionalwordOptionalwordOptionalwritingOptionalx?: stringOptionaly?: stringOptionalzOptionalzoom?: stringOptionaloverlayOptionalcontentOptionalcustom
CoHostModal - Modal for designating and configuring co-host permissions
Component
Description
Allows host to select a co-host and configure their specific permissions/responsibilities. Co-hosts can assist with managing the session with delegated authority.
Supports three levels of customization:
Key Features:
Selector
app-co-host-modal
Standalone
true
Imports
CommonModule, FontAwesomeModule, FormsModule
Input
isCoHostModalVisible - Whether the modal is currently visible. Default:
falseInput
currentCohost - Name/ID of current co-host. Default:
'No coHost'Input
participants - Array of participant objects. Default:
[]Input
coHostResponsibility - Array of co-host responsibility objects with toggles. Default:
[]Input
position - Modal position on screen ('topRight', 'center', etc.). Default:
'topRight'Input
backgroundColor - Background color of the modal content. Default:
'#83c0e9'Input
roomName - Name of the room/session. Default:
''Input
showAlert - Optional alert function for displaying messages. Default:
undefinedInput
updateCoHostResponsibility - Function to update co-host responsibilities. Default:
() => {}Input
updateCoHost - Function to update co-host selection. Default:
() => {}Input
updateIsCoHostModalVisible - Function to update modal visibility. Default:
() => {}Input
socket - Socket.io client instance for real-time communication. Default:
undefinedInput
onCoHostClose - Callback function to close the modal. Default:
() => {}Input
onModifyCoHost - Callback to save co-host settings. Default:
modifyCoHostSettingsService.modifyCoHostSettingsInput
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 and sets default co-host modification handler
Method
ngOnChanges - Updates responsibilities and modal width when inputs change
Method
initializeResponsibilities - Sets up initial responsibility toggles
Method
handleToggleSwitch - Toggles specific co-host responsibility
Method
handleSave - Saves co-host selection and responsibilities
Method
handleClose - Closes modal via onCoHostClose callback
Method
calculateModalWidth - Dynamically sets modal width based on screen size
Method
getCombinedOverlayStyle - Merges default and custom overlay styles
Method
getCombinedContentStyle - Merges default and custom content styles
Method
modalContainerStyle - Returns computed overlay styles
Method
modalContentStyle - Returns computed content styles
Getter
filteredParticipants - Returns participants excluding current co-host