Class ConfirmExitModal

ConfirmExitModal - Confirmation dialog for leaving or being removed from a session

Component

Description

Displays a confirmation modal when a user attempts to leave a room or session. Supports optional ban action for host/admin users.

Supports three levels of customization:

  1. Basic Usage: Use default modal UI with custom callbacks and member info
  2. Style Customization: Override modal appearance with overlayStyle and contentStyle
  3. Full Override: Provide a custom template via customTemplate for complete control

Key Features:

  • Exit confirmation with cancel option
  • Optional ban functionality for hosts
  • Socket-based room exit handling
  • Configurable positioning
  • Custom styling support

Example

Basic Usage:

<app-confirm-exit-modal
  [isConfirmExitModalVisible]="showExitModal"
  [member]="currentMember"
  [roomName]="roomName"
  [socket]="socketInstance"
  [islevel]="userLevel"
  [exitEventOnConfirm]="handleConfirmExit"
  [onConfirmExitClose]="closeExitModal">
</app-confirm-exit-modal>

Example

Style Customization:

<app-confirm-exit-modal
  [isConfirmExitModalVisible]="showExitModal"
  [member]="currentMember"
  [roomName]="roomName"
  [socket]="socketInstance"
  [overlayStyle]="{
    backgroundColor: 'rgba(0, 0, 0, 0.8)'
  }"
  [contentStyle]="{
    backgroundColor: '#2c3e50',
    borderRadius: '12px',
    border: '2px solid #e74c3c'
  }"
  [position]="'center'"
  [exitEventOnConfirm]="handleConfirmExit"
  [onConfirmExitClose]="closeExitModal">
</app-confirm-exit-modal>

Example

Custom Template Override:

<app-confirm-exit-modal
  [isConfirmExitModalVisible]="showExitModal"
  [customTemplate]="customExitTemplate"
  [onConfirmExitClose]="closeExitModal">
</app-confirm-exit-modal>

<ng-template #customExitTemplate let-member="member" let-ban="ban" let-handleConfirmExit="handleConfirmExit">
  <div class="custom-exit-dialog">
    <h3>Confirm {{ ban ? 'Ban & Exit' : 'Exit' }}</h3>
    <p>Are you sure you want to {{ ban ? 'ban and remove' : 'remove' }} {{ member }}?</p>
    <div class="actions">
      <button (click)="handleConfirmExit()">Confirm</button>
      <button (click)="closeExitModal()">Cancel</button>
    </div>
  </div>
</ng-template>

Selector

app-confirm-exit-modal

Standalone

true

Imports

CommonModule, FormsModule, FontAwesomeModule

Input

isConfirmExitModalVisible - Whether the modal is currently visible. Default: false

Input

onConfirmExitClose - Callback function to close the modal. Default: () => {}

Input

position - Modal position on screen ('topRight', 'topLeft', 'bottomRight', 'bottomLeft'). Default: 'topRight'

Input

backgroundColor - Background color of the modal content. Default: '#83c0e9'

Input

exitEventOnConfirm - Callback invoked when exit is confirmed. Default: undefined

Input

member - Name/ID of the member being removed or leaving. Default: ''

Input

ban - Whether to ban the member (in addition to removing). Default: false

Input

roomName - Name of the room/session being exited. Default: ''

Input

socket - Socket.io client instance for real-time communication. Default: undefined

Input

islevel - User level/role (e.g., '0' for host, '2' for participant). Default: '2'

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 default modal content styles

Method

ngOnChanges - Updates visibility state and modal styles when inputs change

Method

handleConfirmExit - Executes exit confirmation logic and closes modal

Method

getCombinedOverlayStyle - Merges default and custom overlay styles

Method

getCombinedContentStyle - Merges default and custom content styles

Implements

  • OnInit
  • OnChanges

Constructors

constructor

Methods

getCombinedContentStyle ngOnInit ngOnChanges handleConfirmExit

Properties

isConfirmExitModalVisible onConfirmExitClose position backgroundColor exitEventOnConfirm member ban roomName socket islevel overlayStyle? contentStyle? customTemplate? faTimes modalContentStyle

Constructors

constructor

Methods

getCombinedContentStyle

ngOnInit

ngOnChanges

handleConfirmExit

Properties

isConfirmExitModalVisible

isConfirmExitModalVisible: boolean = false

onConfirmExitClose

onConfirmExitClose: (() => void)

position

position: string = 'topRight'

backgroundColor

backgroundColor: string = '#83c0e9'

exitEventOnConfirm

exitEventOnConfirm: ((options: ConfirmExitOptions) => void)

member

member: string = ''

ban

ban: boolean = false

roomName

roomName: string = ''

socket

socket: Socket<DefaultEventsMap, DefaultEventsMap> = ...

islevel

islevel: string = ''

OptionaloverlayStyle

overlayStyle?: Partial<CSSStyleDeclaration>

OptionalcontentStyle

contentStyle?: Partial<CSSStyleDeclaration>

OptionalcustomTemplate

customTemplate?: TemplateRef<any>

faTimes

faTimes: IconDefinition = faTimes

modalContentStyle

modalContentStyle: any

Settings

Member Visibility

On This Page

Constructors
Methods
Properties