Member Junction
    Preparing search index...

    Class MJDialogComponent

    mj-dialog — Modal dialog component using native <dialog> element.

    Replaces <kendo-dialog>.

    Supports both explicit width/height and size presets. Content is projected, with an optional <mj-dialog-actions> for the footer.

    On open, focus moves to [data-autofocus], else the first field in the body, else the first button in the body or actions (never the ✕), else the container. Tab between stops is left to the browser. Tab on the last stop wraps to the first, and Shift+Tab on the first stop or the container wraps to the last. A Tab that arrives from outside is taken only by the topmost visible dialog, and only when that dialog traps focus and focus is on the page behind it: not in another modal, and not in an overlay panel rendered on the body. A dropdown or calendar that hands focus back to its field is wrapped when that field is the first or last stop, because the key started in the overlay. Focus returns to the trigger on close. AutoFocus, TrapFocus, and RestoreFocus each default on so a dialog that manages focus itself can turn that one behavior off.

    <mj-dialog [Visible]="showDialog" Title="Confirm" (Close)="onClose()">
      <p>Are you sure?</p>
      <mj-dialog-actions>
        <button mjButton variant="primary" (click)="onConfirm()">Yes</button>
        <button mjButton (click)="onClose()">No</button>
      </mj-dialog-actions>
    </mj-dialog>

    Implements

    • OnDestroy
    Index

    Constructors

    constructor

    Properties

    AriaLabel AutoFocus Close Closeable DialogId Height MinWidth RestoreFocus Role Size Title TrapFocus Width

    Accessors

    dialogId resolvedHeight ResolvedHeight resolvedWidth ResolvedWidth Visible

    Methods

    ngOnDestroy OnBackdropClick OnCloseClick OnEscapeKey OnTabKey

    Constructors

    Properties

    AriaLabel: string | null = null

    Accessible name (aria-label) used only when Title is empty. A set Title keeps aria-labelledby and does not also set aria-label.

    AutoFocus: boolean = true

    Move focus into the dialog when it opens. Off when the dialog focuses itself.

    Close: EventEmitter<void> = ...
    Closeable: boolean = true
    DialogId: number = ...
    Height: string | number | null = null
    MinWidth: number | null = null
    RestoreFocus: boolean = true

    Return focus to the element that was focused when the dialog opened.

    Role: "dialog" | "alertdialog" = 'dialog'

    ARIA role for the dialog container. Defaults to 'dialog'; pass 'alertdialog' for confirmation / destructive prompts that interrupt the user (per WAI-ARIA, an alertdialog conveys an urgent message requiring a response). Backward compatible — existing callers keep 'dialog'.

    Size: MjDialogSize = 'auto'
    Title: string = ''
    TrapFocus: boolean = true

    Keep focus in the dialog. The browser moves Tab between stops. Tab on the last stop wraps to the first, and Shift+Tab on the first stop or the container wraps to the last. A Tab from outside is brought in only when this dialog is the topmost visible one and it traps focus, and not while focus is already inside another modal or an overlay panel.

    Width: string | number | null = null

    Accessors

    Methods

    • Wraps Tab at the ends of the dialog. A Tab that is already handled, including by a dialog nested inside this one, is left alone. With no enabled control, focus stays on the container (it is tabindex="-1", so it is not itself a tab stop).

      Parameters

      • event: KeyboardEvent

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods