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

    Class ModalService

    Service for opening modal dialogs programmatically using the native HTML5 <dialog> element.

    This is the imperative counterpart to the declarative UIDialog component. Use this service when you need to dynamically render a component, pass inputs/outputs, and collect a typed result via ModalRef.closed.

    Scenario Recommended
    Dialog content is determined at runtime ModalService
    Opening a dialog from a service, guard, or resolver ModalService
    You need a typed result observable (ModalRef.closed) ModalService
    You want to pass dynamic inputs/outputs programmatically ModalService
    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

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

    const ref = this.modal.openModal<MyDialog, string>({
      component: MyDialog,
      inputs: { title: 'Confirm' },
      outputs: { saved: (v) => console.log('Saved:', v) },
    });

    ref.closed.subscribe((result) => {
      if (result) { … }
    });
    Index

    Constructors

    constructor

    Methods

    openModal

    Constructors

    Methods

    • Opens a modal dialog containing the given component.

      Type Parameters

      • T
      • R = unknown

      Parameters

      Returns ModalRef<R>

      A ModalRef to observe the result or close programmatically.

    Settings

    Member Visibility

    On This Page

    When to use vs UIDialog
    Constructors
    Methods