Dialog

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

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { BrnDialogContentDirective, BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain';
import {
  HlmDialogComponent,
  HlmDialogContentComponent,
  HlmDialogDescriptionDirective,
  HlmDialogFooterComponent,
  HlmDialogHeaderComponent,
  HlmDialogTitleDirective,
} from '@spartan-ng/ui-dialog-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';

@Component({
  selector: 'spartan-dialog-preview',
  standalone: true,
  imports: [
    BrnDialogTriggerDirective,
    BrnDialogContentDirective,

    HlmDialogComponent,
    HlmDialogContentComponent,
    HlmDialogHeaderComponent,
    HlmDialogFooterComponent,
    HlmDialogTitleDirective,
    HlmDialogDescriptionDirective,

    HlmLabelDirective,
    HlmInputDirective,
    HlmButtonDirective,
  ],
  template: `
    <hlm-dialog>
      <button id="edit-profile" brnDialogTrigger hlmBtn>Edit Profile</button>
      <hlm-dialog-content class="sm:max-w-[425px]" *brnDialogContent="let ctx">
        <hlm-dialog-header>
          <h3 hlmDialogTitle>Edit profile</h3>
          <p hlmDialogDescription>Make changes to your profile here. Click save when you're done.</p>
        </hlm-dialog-header>
        <div class="py-4 grid gap-4">
          <div class="items-center grid grid-cols-4 gap-4">
            <label hlmLabel for="name" class="text-right">Name</label>
            <input hlmInput id="name" value="Pedro Duarte" class="col-span-3" />
          </div>
          <div class="items-center grid grid-cols-4 gap-4">
            <label hlmLabel for="username" class="text-right">Username</label>
            <input hlmInput id="username" value="@peduarte" class="col-span-3" />
          </div>
        </div>
        <hlm-dialog-footer>
          <button hlmBtn type="submit">Save changes</button>
        </hlm-dialog-footer>
      </hlm-dialog-content>
    </hlm-dialog>
  `,
})
export class DialogPreviewComponent {}

Installation

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

Usage

import { BrnDialogContentDirective, BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain';
import {
  HlmDialogComponent,
  HlmDialogContentComponent,
  HlmDialogDescriptionDirective,
  HlmDialogFooterComponent,
  HlmDialogHeaderComponent,
  HlmDialogTitleDirective,
} from '@spartan-ng/ui-dialog-helm';

<hlm-dialog>
  <button brnDialogTrigger hlmBtn>Edit Profile</button>
  <hlm-dialog-content *brnDialogContent="let ctx">
    <hlm-dialog-header>
      <h3 brnDialogTitle hlm>Edit profile</h3>
      <p brnDialogDescription hlm>Make changes to your profile here. Click save when you're done.</p>
    </hlm-dialog-header>
    <hlm-dialog-footer>
      <button hlmBtn type="submit">Save changes</button>
    </hlm-dialog-footer>
  </hlm-dialog-content>
</hlm-dialog>

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

Passphrase Hint: It's sparta

import { Component, signal } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { FormsModule } from '@angular/forms';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { BrnDialogContentDirective } from '@spartan-ng/ui-dialog-brain';
import {
    HlmDialogComponent,
    HlmDialogContentComponent,
    HlmDialogDescriptionDirective,
    HlmDialogFooterComponent,
    HlmDialogHeaderComponent,
    HlmDialogTitleDirective,
} from '@spartan-ng/ui-dialog-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { HlmH4Directive, HlmMutedDirective } from '@spartan-ng/ui-typography-helm';
import { debounceTime, map } from 'rxjs';

@Component({
    selector: 'spartan-dialog-declarative-preview',
    standalone: true,
    imports: [
        FormsModule,
        BrnDialogContentDirective,

        HlmDialogComponent,
        HlmDialogContentComponent,
        HlmDialogHeaderComponent,
        HlmDialogFooterComponent,
        HlmDialogTitleDirective,
        HlmDialogDescriptionDirective,

        HlmLabelDirective,
        HlmInputDirective,
        HlmButtonDirective,
        HlmBadgeDirective,
        HlmMutedDirective,
        HlmH4Directive,
    ],
    template: `
        <div class="space-y-4">
            <p hlmH4>Enter passphrase to open dialog</p>
            <label hlmLabel>
                Passphrase
                <input
                    name="passphrase"
                    hlmInput
                    [ngModelOptions]="{ standalone: true }"
                    [ngModel]="passphrase()"
                    (ngModelChange)="passphrase.set($event)"
                />
                <span hlmMuted>Hint: It's sparta</span>
            </label>
        </div>
        <hlm-dialog [state]="state()" (closed)="passphrase.set('')">
            <hlm-dialog-content *brnDialogContent="let ctx">
                <hlm-dialog-header class="w-[250px]">
                    <h3 hlmDialogTitle>Welcome to Sparta</h3>
                    <p hlmDialogDescription>Enjoy declarative dialogs.</p>
                </hlm-dialog-header>
            </hlm-dialog-content>
        </hlm-dialog>
    `,
})
export class DialogDeclarativePreviewComponent {
    protected readonly passphrase = signal<string>('');
    private readonly _debouncedState$ = toObservable(this.passphrase).pipe(
        debounceTime(500),
        map((passphrase) => (passphrase === 'sparta' ? 'open' : 'closed')),
    );
    protected readonly state = toSignal(this._debouncedState$);
}

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.

Note

Do not use the HlmMenuItem or BrnMenuItem directives as they conflict with BrnDialogTrigger & brnDialogTriggerFor! We expose the hlm variants so you can directly use them to style your elements. Check out the code of the example below!

Right click here

import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { BrnDialogContentDirective, BrnDialogTriggerDirective } from '@spartan-ng/ui-dialog-brain';
import {
  HlmDialogComponent,
  HlmDialogContentComponent,
  HlmDialogDescriptionDirective,
  HlmDialogFooterComponent,
  HlmDialogHeaderComponent,
  HlmDialogTitleDirective,
} from '@spartan-ng/ui-dialog-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { BrnContextMenuTriggerDirective } from '@spartan-ng/ui-menu-brain';
import {
  HlmMenuComponent,
  HlmMenuGroupComponent,
  HlmMenuItemDirective,
  HlmMenuShortcutComponent,
  hlmMenuItemVariants,
} from '@spartan-ng/ui-menu-helm';

@Component({
  selector: 'spartan-dialog-context-menu',
  standalone: true,
  imports: [
    BrnDialogTriggerDirective,
    BrnDialogContentDirective,

    HlmDialogContentComponent,
    HlmDialogComponent,
    HlmDialogHeaderComponent,
    HlmDialogFooterComponent,
    HlmDialogTitleDirective,
    HlmDialogDescriptionDirective,

    HlmLabelDirective,
    HlmButtonDirective,
    HlmInputDirective,

    BrnContextMenuTriggerDirective,

    HlmMenuItemDirective,
    HlmMenuShortcutComponent,
    HlmMenuComponent,
    HlmMenuGroupComponent,
  ],
  template: `
    <div
      [brnCtxMenuTriggerFor]="menu"
      class="border-border flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
    >
      Right click here
    </div>

    <ng-template #menu>
      <hlm-menu class="w-64">
        <hlm-menu-group>
          <button inset hlmMenuItem>
            Save
            <hlm-menu-shortcut>⌘S</hlm-menu-shortcut>
          </button>

          <button disabled inset hlmMenuItem>
            Archive
            <hlm-menu-shortcut>⌘A</hlm-menu-shortcut>
          </button>

          <hlm-dialog>
            <button [class]="_hlmMenuItemClasses" brnDialogTrigger>
              Print
              <hlm-menu-shortcut>⌘P</hlm-menu-shortcut>
            </button>
            <hlm-dialog-content *brnDialogContent="let ctx">
              <hlm-dialog-header>
                <h3 brnDialogTitle hlm>Print this page</h3>
                <p brnDialogDescription hlm>
                  Are you sure you want to print this page? Only print if absolutely necessary! The less we print, the
                  less paper we need, the better it is for our environment!
                </p>
              </hlm-dialog-header>
              <hlm-dialog-footer>
                <button hlmBtn variant="ghost" (click)="ctx.close()">Cancel</button>
                <button hlmBtn>Print</button>
              </hlm-dialog-footer>
            </hlm-dialog-content>
          </hlm-dialog>
        </hlm-menu-group>
      </hlm-menu>
    </ng-template>
  `,
})
export class DialogContextMenuPreviewComponent {
  protected readonly _hlmMenuItemClasses = hlmMenuItemVariants({ inset: true });
}

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.

import {
    HlmDialogDescriptionDirective,
    HlmDialogHeaderComponent,
    HlmDialogService,
    HlmDialogTitleDirective,
} from '@spartan-ng/ui-dialog-helm';
import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
import { HlmTableComponent, HlmTdComponent, HlmThComponent, HlmTrowComponent } from '@spartan-ng/ui-table-helm';

type ExampleUser = {
    name: string;
    email: string;
    phone: string;
};

@Component({
    selector: 'spartan-dialog-dynamic-component-preview',
    standalone: true,
    imports: [HlmButtonDirective],
    template: `
        <button hlmBtn (click)="openDynamicComponent()">Select User</button>
    `,
})
export class DialogDynamicComponentPreviewComponent {
    private readonly _hlmDialogService = inject(HlmDialogService);

    private readonly _users: ExampleUser[] = [
        {
            name: 'Helena Chambers',
            email: 'helenachambers@chorizon.com',
            phone: '+1 (812) 588-3759',
        },
        {
            name: 'Josie Crane',
            email: 'josiecrane@hinway.com',
            phone: '+1 (884) 523-3324',
        },
        {
            name: 'Lou Hartman',
            email: 'louhartman@optyk.com',
            phone: '+1 (912) 479-3998',
        },
        {
            name: 'Lydia Zimmerman',
            email: 'lydiazimmerman@ultrasure.com',
            phone: '+1 (944) 511-2111',
        },
    ];

    public openDynamicComponent() {
        const dialogRef = this._hlmDialogService.open(SelectUserComponent, {
            context: {
                users: this._users,
            },
            contentClass: 'sm:!max-w-[750px]',
        });

        dialogRef.closed$.subscribe((user) => {
            if (user) {
                console.log('Selected user:', user);
            }
        });
    }
}

@Component({
    selector: 'dynamic-content',
    standalone: true,
    imports: [
        HlmDialogHeaderComponent,
        HlmDialogTitleDirective,
        HlmDialogDescriptionDirective,
        HlmTableComponent,
        HlmThComponent,
        HlmTrowComponent,
        HlmTdComponent,
        HlmButtonDirective,
        HlmIconComponent,
    ],
    providers: [provideIcons({ lucideCheck })],
    template: `
        <hlm-dialog-header>
            <h3 hlmDialogTitle>Select user</h3>
            <p hlmDialogDescription>Click a row to select a user.</p>
        </hlm-dialog-header>

        <hlm-table>
            <hlm-trow>
                <hlm-th class="w-44">Name</hlm-th>
                <hlm-th class="w-60">Email</hlm-th>
                <hlm-th class="w-48">Phone</hlm-th>
            </hlm-trow>
            @for (user of users; track user.name) {
                <button class="text-left" (click)="selectUser(user)">
                    <hlm-trow>
                        <hlm-td truncate class="font-medium w-44">{{ user.name }}</hlm-td>
                        <hlm-td class="w-60">{{ user.email }}</hlm-td>
                        <hlm-td class="w-48">{{ user.phone }}</hlm-td>
                    </hlm-trow>
                </button>
            }
        </hlm-table>
    `,
})
class SelectUserComponent {
    @HostBinding('class') private readonly _class: string = 'flex flex-col gap-4';

    private readonly _dialogRef = inject<BrnDialogRef<ExampleUser>>(BrnDialogRef);
    private readonly _dialogContext = injectBrnDialogContext<{ users: ExampleUser[] }>();

    protected readonly users = this._dialogContext.users;

    public selectUser(user: ExampleUser) {
        this._dialogRef.close(user);
    }
}

Dropdown Menu

Data Table

Components are in alpha

Getting Started

Stack

UI

Components

Dialog

Installation

Usage

Declarative Usage

Inside Menu

Dynamic Component

On this page