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
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
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
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
touchOptional
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
countdownOptional
localOptional
overlayOptional
contentOptional
custom
ConfirmHereModal - Presence confirmation modal with countdown timer
Component
Description
Displays an "Are you still here?" modal with countdown timer to confirm user presence. Automatically disconnects user if they don't respond within the countdown duration.
Supports three levels of customization:
Key Features:
Example
Basic Usage:
Example
Style Customization:
Example
Custom Template Override:
Selector
app-confirm-here-modal
Standalone
true
Imports
CommonModule, FontAwesomeModule
Input
isConfirmHereModalVisible - Whether the modal is currently visible. Default:
false
Input
position - Modal position on screen (e.g., 'center', 'topCenter'). Default:
'center'
Input
backgroundColor - Background color of the modal content. Default:
'#83c0e9'
Input
displayColor - Color of the countdown timer text. Default:
'#000000'
Input
onConfirmHereClose - Callback function when user confirms presence or modal closes. Default:
() => {}
Input
socket - Socket.io client instance for real-time communication. Default:
undefined
Input
localSocket - Optional local socket instance for community edition. Default:
undefined
Input
roomName - Name of the room/session for presence confirmation. Default:
''
Input
member - Name/ID of the member confirming presence. Default:
''
Input
countdownDuration - Countdown duration in seconds before auto-disconnect. Default:
120
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 countdown timer and socket listeners
Method
ngOnDestroy - Cleans up timers and socket listeners
Method
startCountdown - Begins countdown timer
Method
stopCountdown - Stops countdown timer
Method
handleConfirmHere - Handles user confirmation and sends socket event
Method
getCombinedOverlayStyle - Merges default and custom overlay styles
Method
getCombinedContentStyle - Merges default and custom content styles