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?: stringOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbackgroundOptionalbaselineOptionalbaselineOptionalblockOptionalborder?: stringOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalborderOptionalbottom?: stringOptionalboxOptionalboxOptionalbreakOptionalbreakOptionalbreakOptionalcaptionOptionalcaretOptionalclear?: stringOptionalclip?: stringOptionalclipOptionalclipOptionalcolor?: stringOptionalcolorOptionalcolorOptionalcolorOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumnOptionalcolumns?: stringOptionalcontain?: stringOptionalcontainOptionalcontainOptionalcontainOptionalcontainOptionalcontainOptionalcontainer?: stringOptionalcontainerOptionalcontainerOptionalcontent?: stringOptionalcontentOptionalcounterOptionalcounterOptionalcounterOptionalcssOptionalcssOptionalcursor?: stringOptionalcx?: stringOptionalcy?: stringOptionald?: stringOptionaldirection?: stringOptionaldisplay?: stringOptionaldominantOptionalemptyOptionalfill?: stringOptionalfillOptionalfillOptionalfilter?: stringOptionalflex?: stringOptionalflexOptionalflexOptionalflexOptionalflexOptionalflexOptionalflexOptionalfloat?: stringOptionalfloodOptionalfloodOptionalfont?: stringOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalfontOptionalforcedOptionalgap?: stringOptionalgrid?: stringOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalgridOptionalheight?: stringOptionalhyphenateOptionalhyphens?: stringOptionalimageOptionalimageOptionalinlineOptionalinset?: stringOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalinsetOptionalisolation?: stringOptionaljustifyOptionaljustifyOptionaljustifyOptionalleft?: stringOptional Readonlylength?: numberOptionalletterOptionallightingOptionallineOptionallineOptionallistOptionallistOptionallistOptionallistOptionalmargin?: stringOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarginOptionalmarker?: stringOptionalmarkerOptionalmarkerOptionalmarkerOptionalmask?: stringOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmaskOptionalmathOptionalmathOptionalmaxOptionalmaxOptionalmaxOptionalmaxOptionalminOptionalminOptionalminOptionalminOptionalmixOptionalobjectOptionalobjectOptionaloffset?: stringOptionaloffsetOptionaloffsetOptionaloffsetOptionaloffsetOptionaloffsetOptionalopacity?: stringOptionalorder?: stringOptionalorphans?: stringOptionaloutline?: stringOptionaloutlineOptionaloutlineOptionaloutlineOptionaloutlineOptionaloverflow?: stringOptionaloverflowOptionaloverflowOptionaloverflowOptionaloverflowX?: stringOptionaloverflowY?: stringOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionalpadding?: stringOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpage?: stringOptionalpageOptionalpageOptionalpageOptionalpaintOptional ReadonlyparentOptionalperspective?: stringOptionalperspectiveOptionalplaceOptionalplaceOptionalplaceOptionalpointerOptionalposition?: stringOptionalprintOptionalquotes?: stringOptionalr?: stringOptionalresize?: stringOptionalright?: stringOptionalrotate?: stringOptionalrowOptionalrubyOptionalrx?: stringOptionalry?: stringOptionalscale?: stringOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollbarOptionalscrollbarOptionalscrollbarOptionalshapeOptionalshapeOptionalshapeOptionalshapeOptionalstopOptionalstopOptionalstroke?: stringOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionaltabOptionaltableOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltop?: stringOptionaltouchOptionaltransform?: stringOptionaltransformOptionaltransformOptionaltransformOptionaltransition?: stringOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltranslate?: stringOptionalunicodeOptionaluserOptionalvectorOptionalverticalOptionalvisibility?: stringOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwhiteOptionalwhiteOptionalwidows?: stringOptionalwidth?: stringOptionalwillOptionalwordOptionalwordOptionalwordOptionalwritingOptionalx?: stringOptionaly?: stringOptionalzOptionalzoom?: 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?: stringOptionaloverflowOptionaloverflowOptionaloverflowOptionaloverflowX?: stringOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionaloverscrollOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpaddingOptionalpage?: stringOptionalpageOptionalpageOptionalpageOptionalpaintOptional ReadonlyparentOptionalperspective?: stringOptionalperspectiveOptionalplaceOptionalplaceOptionalplaceOptionalpointerOptionalposition?: stringOptionalprintOptionalquotes?: stringOptionalr?: stringOptionalresize?: stringOptionalrotate?: stringOptionalrowOptionalrubyOptionalrx?: stringOptionalry?: stringOptionalscale?: stringOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollOptionalscrollbarOptionalscrollbarOptionalscrollbarOptionalshapeOptionalshapeOptionalshapeOptionalshapeOptionalstopOptionalstopOptionalstroke?: stringOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionaltabOptionaltableOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltouchOptionaltransform?: stringOptionaltransformOptionaltransformOptionaltransformOptionaltransition?: stringOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltranslate?: stringOptionalunicodeOptionaluserOptionalvectorOptionalverticalOptionalvisibility?: stringOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwhiteOptionalwhiteOptionalwidows?: stringOptionalwillOptionalwordOptionalwordOptionalwordOptionalwritingOptionalx?: stringOptionaly?: stringOptionalzOptionalzoom?: stringOptionalshowOptionaloverlayOptionalcontentOptionalcustom
EventSettingsModal - Modal for configuring room-wide event permissions (host only)
Component
Description
Provides host/admin controls for managing participant permissions: audio, video, screenshare, and chat. Settings are saved to the room and enforced for all participants.
Supports three levels of customization:
Key Features:
Example
Basic Usage:
Example
Style Customization:
Example
Custom Template Override:
Selector
app-event-settings-modal
Standalone
true
Imports
CommonModule, FontAwesomeModule, FormsModule
Input
isEventSettingsModalVisible - Whether the modal is currently visible. Default:
falseInput
onEventSettingsClose - Callback function to close the modal. Default:
() => {}Input
onModifyEventSettings - Callback to save modified settings. Default:
modifySettingsService.modifySettingsInput
position - Modal position on screen ('topLeft', 'topRight', 'bottomLeft', 'bottomRight'). Default:
'topRight'Input
backgroundColor - Background color of the modal content. Default:
'#83c0e9'Input
audioSetting - Current audio permission setting. Default:
''Input
videoSetting - Current video permission setting. Default:
''Input
screenshareSetting - Current screenshare permission setting. Default:
''Input
chatSetting - Current chat permission setting. Default:
''Input
updateAudioSetting - Function to update audio setting state. Default:
() => {}Input
updateVideoSetting - Function to update video setting state. Default:
() => {}Input
updateScreenshareSetting - Function to update screenshare setting state. Default:
() => {}Input
updateChatSetting - Function to update chat setting state. Default:
() => {}Input
updateIsSettingsModalVisible - Function to update modal visibility. Default:
() => {}Input
roomName - Name of the room/session. Default:
''Input
socket - Socket.io client instance for real-time communication. Default:
undefinedInput
showAlert - Optional alert function for displaying success/error messages. Default:
undefinedInput
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 up default modify settings handler
Method
ngOnChanges - Updates internal setting states when modal visibility changes
Method
updateStatesFromParameters - Synchronizes internal states with input props
Method
handleSaveSettings - Saves modified settings via socket and closes modal
Method
closeModal - Closes the modal via onEventSettingsClose callback
Method
getCombinedOverlayStyle - Merges default and custom overlay styles
Method
getCombinedContentStyle - Merges default and custom content styles
Method
getModalContentStyle - Returns computed content styles with positioning