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="grid gap-4 py-4">
<div class="grid grid-cols-4 items-center 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="grid grid-cols-4 items-center 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
ng 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>
</brn-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.
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 });
}