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.
Optional
accentOptional
alignOptional
alignOptional
alignOptional
alignmentOptional
all?: stringOptional
animation?: stringOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
appearance?: stringOptional
aspectOptional
backdropOptional
backfaceOptional
background?: stringOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
baselineOptional
baselineOptional
blockOptional
border?: stringOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
bottom?: stringOptional
boxOptional
boxOptional
breakOptional
breakOptional
breakOptional
captionOptional
caretOptional
clear?: stringOptional
clip?: stringOptional
clipOptional
clipOptional
color?: stringOptional
colorOptional
colorOptional
colorOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columns?: stringOptional
contain?: stringOptional
containOptional
containOptional
containOptional
containOptional
containOptional
container?: stringOptional
containerOptional
containerOptional
content?: stringOptional
contentOptional
counterOptional
counterOptional
counterOptional
cssOptional
cssOptional
cursor?: stringOptional
cx?: stringOptional
cy?: stringOptional
d?: stringOptional
direction?: stringOptional
display?: stringOptional
dominantOptional
emptyOptional
fill?: stringOptional
fillOptional
fillOptional
filter?: stringOptional
flex?: stringOptional
flexOptional
flexOptional
flexOptional
flexOptional
flexOptional
flexOptional
float?: stringOptional
floodOptional
floodOptional
font?: stringOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
forcedOptional
gap?: stringOptional
grid?: stringOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
height?: stringOptional
hyphenateOptional
hyphens?: stringOptional
imageOptional
imageOptional
inlineOptional
inset?: stringOptional
insetOptional
insetOptional
insetOptional
insetOptional
insetOptional
insetOptional
isolation?: stringOptional
justifyOptional
justifyOptional
justifyOptional
left?: stringOptional
Readonly
length?: numberOptional
letterOptional
lightingOptional
lineOptional
lineOptional
listOptional
listOptional
listOptional
listOptional
margin?: stringOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marker?: stringOptional
markerOptional
markerOptional
markerOptional
mask?: stringOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
mathOptional
mathOptional
maxOptional
maxOptional
maxOptional
maxOptional
minOptional
minOptional
minOptional
minOptional
mixOptional
objectOptional
objectOptional
offset?: stringOptional
offsetOptional
offsetOptional
offsetOptional
offsetOptional
offsetOptional
opacity?: stringOptional
order?: stringOptional
orphans?: stringOptional
outline?: stringOptional
outlineOptional
outlineOptional
outlineOptional
outlineOptional
overflow?: stringOptional
overflowOptional
overflowOptional
overflowOptional
overflowX?: stringOptional
overflowY?: stringOptional
overscrollOptional
overscrollOptional
overscrollOptional
overscrollOptional
overscrollOptional
padding?: stringOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
page?: stringOptional
pageOptional
pageOptional
pageOptional
paintOptional
Readonly
parentOptional
perspective?: stringOptional
perspectiveOptional
placeOptional
placeOptional
placeOptional
pointerOptional
position?: stringOptional
printOptional
quotes?: stringOptional
r?: stringOptional
resize?: stringOptional
right?: stringOptional
rotate?: stringOptional
rowOptional
rubyOptional
rx?: stringOptional
ry?: stringOptional
scale?: stringOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollbarOptional
scrollbarOptional
scrollbarOptional
shapeOptional
shapeOptional
shapeOptional
shapeOptional
stopOptional
stopOptional
stroke?: stringOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
tabOptional
tableOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
top?: stringOptional
touchOptional
transform?: stringOptional
transformOptional
transformOptional
transformOptional
transition?: stringOptional
transitionOptional
transitionOptional
transitionOptional
transitionOptional
transitionOptional
translate?: stringOptional
unicodeOptional
userOptional
vectorOptional
verticalOptional
visibility?: stringOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
whiteOptional
whiteOptional
widows?: stringOptional
width?: stringOptional
willOptional
wordOptional
wordOptional
wordOptional
writingOptional
x?: stringOptional
y?: stringOptional
zOptional
zoom?: stringOptional
accentOptional
alignOptional
alignOptional
alignOptional
alignmentOptional
all?: stringOptional
animation?: stringOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
animationOptional
appearance?: stringOptional
aspectOptional
backdropOptional
backfaceOptional
background?: stringOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
backgroundOptional
baselineOptional
baselineOptional
blockOptional
border?: stringOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
borderOptional
boxOptional
boxOptional
breakOptional
breakOptional
breakOptional
captionOptional
caretOptional
clear?: stringOptional
clip?: stringOptional
clipOptional
clipOptional
color?: stringOptional
colorOptional
colorOptional
colorOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columnOptional
columns?: stringOptional
contain?: stringOptional
containOptional
containOptional
containOptional
containOptional
containOptional
container?: stringOptional
containerOptional
containerOptional
content?: stringOptional
contentOptional
counterOptional
counterOptional
counterOptional
cssOptional
cssOptional
cursor?: stringOptional
cx?: stringOptional
cy?: stringOptional
d?: stringOptional
direction?: stringOptional
display?: stringOptional
dominantOptional
emptyOptional
fill?: stringOptional
fillOptional
fillOptional
filter?: stringOptional
flex?: stringOptional
flexOptional
flexOptional
flexOptional
flexOptional
flexOptional
flexOptional
float?: stringOptional
floodOptional
floodOptional
font?: stringOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
fontOptional
forcedOptional
gap?: stringOptional
grid?: stringOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
gridOptional
height?: stringOptional
hyphenateOptional
hyphens?: stringOptional
imageOptional
imageOptional
inlineOptional
inset?: stringOptional
insetOptional
insetOptional
insetOptional
insetOptional
insetOptional
insetOptional
isolation?: stringOptional
justifyOptional
justifyOptional
justifyOptional
Readonly
length?: numberOptional
letterOptional
lightingOptional
lineOptional
lineOptional
listOptional
listOptional
listOptional
listOptional
margin?: stringOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marginOptional
marker?: stringOptional
markerOptional
markerOptional
markerOptional
mask?: stringOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
maskOptional
mathOptional
mathOptional
maxOptional
maxOptional
maxOptional
minOptional
minOptional
minOptional
minOptional
mixOptional
objectOptional
objectOptional
offset?: stringOptional
offsetOptional
offsetOptional
offsetOptional
offsetOptional
offsetOptional
opacity?: stringOptional
order?: stringOptional
orphans?: stringOptional
outline?: stringOptional
outlineOptional
outlineOptional
outlineOptional
outlineOptional
overflow?: stringOptional
overflowOptional
overflowOptional
overflowOptional
overflowX?: stringOptional
overscrollOptional
overscrollOptional
overscrollOptional
overscrollOptional
overscrollOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
paddingOptional
page?: stringOptional
pageOptional
pageOptional
pageOptional
paintOptional
Readonly
parentOptional
perspective?: stringOptional
perspectiveOptional
placeOptional
placeOptional
placeOptional
pointerOptional
position?: stringOptional
printOptional
quotes?: stringOptional
r?: stringOptional
resize?: stringOptional
rotate?: stringOptional
rowOptional
rubyOptional
rx?: stringOptional
ry?: stringOptional
scale?: stringOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollOptional
scrollbarOptional
scrollbarOptional
scrollbarOptional
shapeOptional
shapeOptional
shapeOptional
shapeOptional
stopOptional
stopOptional
stroke?: stringOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
strokeOptional
tabOptional
tableOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
textOptional
touchOptional
transform?: stringOptional
transformOptional
transformOptional
transformOptional
transition?: stringOptional
transitionOptional
transitionOptional
transitionOptional
transitionOptional
transitionOptional
translate?: stringOptional
unicodeOptional
userOptional
vectorOptional
verticalOptional
visibility?: stringOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
webkitOptional
whiteOptional
whiteOptional
widows?: stringOptional
willOptional
wordOptional
wordOptional
wordOptional
writingOptional
x?: stringOptional
y?: stringOptional
zOptional
zoom?: stringOptional
showOptional
overlayOptional
contentOptional
custom
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:
false
Input
onEventSettingsClose - Callback function to close the modal. Default:
() => {}
Input
onModifyEventSettings - Callback to save modified settings. Default:
modifySettingsService.modifySettings
Input
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:
undefined
Input
showAlert - Optional alert function for displaying success/error messages. Default:
undefined
Input
overlayStyle - Custom CSS styles for the modal overlay backdrop. Default:
undefined
Input
contentStyle - Custom CSS styles for the modal content container. Default:
undefined
Input
customTemplate - Custom TemplateRef to completely replace default modal template. Default:
undefined
Method
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