MediaSFU Angular
    Preparing search index...

    Class MenuModal

    MenuModal - Customizable menu modal with extensive override capabilities

    app-menu-modal

    true

    ./menu-modal.component.html

    ./menu-modal.component.css

    A fully customizable menu modal supporting three levels of customization:

    1. Style Overrides: Customize overlay and content styles via overlayStyle and contentStyle
    2. Template Sections: Override specific sections using render* props (header, title, buttons, etc.)
    3. Complete Replacement: Provide a customTemplate to replace the entire modal UI

    Basic Usage with Default Template

    <app-menu-modal
      [isVisible]="true"
      backgroundColor="#83c0e9"
      roomName="Room 123"
      adminPasscode="AdminPass"
      [customButtons]="customButtons"
      [shareButtons]="true"
      position="bottomRight"
      islevel="2"
      eventType="meeting"
      localLink="https://www.google.com"
      (onClose)="closeMenu()">
    </app-menu-modal>

    Style Customization

    <app-menu-modal
      [isVisible]="true"
      [overlayStyle]="{ backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
      [contentStyle]="{ borderRadius: '20px', boxShadow: '0 10px 40px rgba(0,0,0,0.5)' }"
      roomName="Room 123"
      (onClose)="closeMenu()">
    </app-menu-modal>

    Custom Template (Complete Override)

    <app-menu-modal
      [isVisible]="true"
      [customTemplate]="customMenuTemplate"
      roomName="Room 123"
      (onClose)="closeMenu()">
    </app-menu-modal>

    <ng-template #customMenuTemplate let-context>
      <div class="my-custom-menu">
        <h2>{{ context.roomName }}</h2>
        <button (click)="context.onClose()">Close</button>
      </div>
    </ng-template>

    Section Override with renderTitle

    <app-menu-modal
      [isVisible]="true"
      [renderTitle]="customTitle"
      roomName="Room 123"
      (onClose)="closeMenu()">
    </app-menu-modal>

    <ng-template #customTitle let-context>
      <h1 class="custom-title">🎯 {{ context.title || 'Menu' }}</h1>
    </ng-template>

    isVisible - Controls modal visibility

    backgroundColor - Background color of the modal content (default: '#83c0e9')

    position - Modal position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' (default: 'bottomRight')

    roomName - Room name to display

    adminPasscode - Admin passcode for the room

    islevel - User level indicator

    eventType - Type of event (meeting, webinar, etc.)

    customButtons - Array of custom action buttons

    shareButtons - Show/hide share buttons (default: true)

    localLink - Local link for sharing

    title - Optional custom title

    overlayStyle - Custom styles for modal overlay

    contentStyle - Custom styles for modal content

    customTemplate - Complete template override

    renderHeader - Custom header template

    renderTitle - Custom title template

    renderCustomButtons - Custom buttons section template

    renderMeetingPasscode - Custom meeting passcode template

    renderMeetingId - Custom meeting ID template

    renderShareButtons - Custom share buttons template

    renderBody - Custom body template

    renderContent - Custom content template

    onClose - Event emitted when modal is closed

    MenuModalOptions for complete options interface

    Index

    Accessors

    renderContext

    Constructors

    constructor

    Methods

    getTitle modalContainerStyle modalContentStyle getCombinedContentStyle handleClose

    Properties

    backgroundColor isVisible customButtons shareButtons position roomName adminPasscode islevel eventType localLink title? overlayStyle? contentStyle? customTemplate? overlayAttributes? contentAttributes? headerAttributes? titleWrapperAttributes? badgeWrapperAttributes? closeButtonAttributes? menuIconAttributes? closeIconAttributes? dividerAttributes? bodyAttributes? scrollWrapperAttributes? customButtonsWrapperAttributes? renderHeader? renderTitle? renderCustomButtons? renderMeetingPasscode? renderMeetingId? renderShareButtons? renderBody? renderContent? onClose faBars faTimes

    Accessors

    Constructors

    Methods

    • Returns {
          position: string;
          top: number;
          left: number;
          width: string;
          height: string;
          backgroundColor: string;
          display: string;
          zIndex: number;
      }

    • Returns {
          backgroundColor: string;
          borderRadius: string;
          padding: string;
          width: string;
          maxHeight: string;
          overflowY: string;
          top: string;
          bottom: string;
          left: string;
          right: string;
      }

    Properties

    backgroundColor: string = '#83c0e9'
    isVisible: boolean
    customButtons: CustomButton[] = []
    shareButtons: boolean = true
    position: string = 'bottomRight'
    roomName: string
    adminPasscode: string
    islevel: string
    eventType: EventType
    localLink: string
    title?: string
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: TemplateRef<any>
    overlayAttributes?: { [key: string]: any }
    contentAttributes?: { [key: string]: any }
    headerAttributes?: { [key: string]: any }
    titleWrapperAttributes?: { [key: string]: any }
    badgeWrapperAttributes?: { [key: string]: any }
    closeButtonAttributes?: { [key: string]: any }
    menuIconAttributes?: { [key: string]: any }
    closeIconAttributes?: { [key: string]: any }
    dividerAttributes?: { [key: string]: any }
    bodyAttributes?: { [key: string]: any }
    scrollWrapperAttributes?: { [key: string]: any }
    customButtonsWrapperAttributes?: { [key: string]: any }
    renderHeader?: TemplateRef<MenuModalRenderContext>
    renderTitle?: TemplateRef<any>
    renderCustomButtons?: TemplateRef<any>
    renderMeetingPasscode?: TemplateRef<any>
    renderMeetingId?: TemplateRef<any>
    renderShareButtons?: TemplateRef<any>
    renderBody?: TemplateRef<any>
    renderContent?: TemplateRef<any>
    onClose: () => void
    faBars: IconDefinition = faBars
    faTimes: IconDefinition = faTimes

    Settings

    Member Visibility

    On This Page

    Accessors
    Constructors
    Methods
    Properties