A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.


npx nx g @spartan-ng/cli:ui dialog


import { BrnDialogContentDirective, BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain';
import {
} from '@spartan-ng/ui-dialog-helm';
  <button brnDialogTrigger hlmBtn>Edit Profile</button>
  <hlm-dialog-content *brnDialogContent="let ctx">
      <h3 brnDialogTitle hlm>Edit profile</h3>
      <p brnDialogDescription hlm>Make changes to your profile here. Click save when you're done.</p>
      <button hlmBtn type="submit">Save changes</button>

Declarative Usage

Spartan's dialog supports declarative usage. Simply set it's state input to open or closed and let spartan handle the rest. This allows you to leverage the power of declarative code, like listening to changes in an input field, debouncing the value, and opening the dialog only if the user's enters the correct passphrase.

Enter passphrase to open dialog

Inside Menu

You can nest dialogs inside context or dropdown menus. Make sure to wrap the menu-item inside the brn-dialog component and apply the BrnDialogTrigger directive. Another option is to use the brnDialogTriggerFor alternative, which takes in a reference to the brn-dialog. That way you can avoid nesting the template.

Right click here

Dynamic Component

You can dynamically open a dialog with a component rendered as the content. The dialog context can be injected into the dynamic component using the provided injectBrnDialogContext function.

Dropdown Menu Data Table