@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIDialog

    A declarative dialog component built on the native <dialog> element.

    Provides header / body / footer content slots. Open and close it via the open two-way binding or by calling show() / close().

    Scenario Recommended
    Dialog content is known at compile time UIDialog
    Dialog is tied to a specific view or form UIDialog
    You want template-driven two-way binding ([(open)]) UIDialog
    Dialog content is determined at runtime ModalService
    You need to open a dialog from a service or guard ModalService
    You need a typed result (ModalRef.closed) ModalService
    You want to pass dynamic inputs/outputs programmatically ModalService

    Rule of thumb: reach for UIDialog when you own the template and the dialog lives alongside its trigger. Reach for ModalService when the dialog must be spawned dynamically or from non-component code.

    <ui-dialog [(open)]="showDialog" ariaLabel="Confirm action">
      <ui-dialog-header>Confirm</ui-dialog-header>
      <ui-dialog-body>
        <p>Are you sure you want to proceed?</p>
      </ui-dialog-body>
      <ui-dialog-footer>
        <ui-button variant="outlined" (click)="showDialog = false">Cancel</ui-button>
        <ui-button (click)="confirm()">OK</ui-button>
      </ui-dialog-footer>
    </ui-dialog>
    Index

    Constructors

    constructor

    Properties

    ariaLabel closed closeOnBackdropClick closeOnEscape open

    Methods

    close show

    Constructors

    • Returns UIDialog

    Properties

    ariaLabel: InputSignal<string> = ...

    Accessible label for the dialog.

    closed: OutputEmitterRef<void> = ...

    Emitted when the dialog is closed.

    closeOnBackdropClick: InputSignal<boolean> = ...

    Whether clicking the backdrop closes the dialog.

    closeOnEscape: InputSignal<boolean> = ...

    Whether pressing Escape closes the dialog.

    open: ModelSignal<boolean> = ...

    Whether the dialog is open. Supports two-way binding.

    Methods

    • Close the dialog.

      Returns void

    • Show the dialog.

      Returns void

    Settings

    Member Visibility

    On This Page

    When to use vs ModalService
    Constructors
    Properties
    Methods