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?: 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?: 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?: stringOptionaljustifyOptionaljustifyOptionaljustifyOptional 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?: stringOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionalstrokeOptionaltabOptionaltableOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltextOptionaltouchOptionaltransformOptionaltransformOptionaltransformOptionaltransition?: stringOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltransitionOptionaltranslate?: stringOptionalunicodeOptionaluserOptionalvectorOptionalverticalOptionalvisibility?: stringOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwebkitOptionalwhiteOptionalwhiteOptionalwidows?: stringOptionalwidth?: stringOptionalwillOptionalwordOptionalwordOptionalwordOptionalwritingOptionalx?: stringOptionaly?: stringOptionalzOptionalzoom?: stringOptionalcountdownOptionallocalOptionaloverlayOptionalcontentOptionalcustom
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:
falseInput
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:
undefinedInput
localSocket - Optional local socket instance for community edition. Default:
undefinedInput
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:
120Input
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 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