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 { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { radixCross1 } from '@ng-icons/radix-icons';
import {
BrnDialogCloseDirective,
BrnDialogComponent,
BrnDialogContentDirective,
BrnDialogDescriptionDirective,
BrnDialogOverlayComponent,
BrnDialogTitleDirective,
BrnDialogTriggerDirective,
} from '@spartan-ng/ui-dialog-brain';
import {
HlmDialogCloseDirective,
HlmDialogContentDirective,
HlmDialogDescriptionDirective,
HlmDialogFooterComponent,
HlmDialogHeaderComponent,
HlmDialogOverlayDirective,
HlmDialogTitleDirective,
} from '@spartan-ng/ui-dialog-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
@Component({
selector: 'spartan-dialog-preview',
standalone: true,
imports: [
BrnDialogComponent,
BrnDialogOverlayComponent,
BrnDialogTriggerDirective,
BrnDialogContentDirective,
BrnDialogCloseDirective,
BrnDialogTitleDirective,
BrnDialogDescriptionDirective,
HlmDialogOverlayDirective,
HlmDialogContentDirective,
HlmDialogHeaderComponent,
HlmDialogFooterComponent,
HlmDialogTitleDirective,
HlmDialogDescriptionDirective,
HlmDialogCloseDirective,
HlmLabelDirective,
HlmButtonDirective,
HlmInputDirective,
HlmIconComponent,
HlmButtonDirective,
HlmIconComponent,
],
providers: [provideIcons({ radixCross1 })],
template: `
<brn-dialog closeDelay='100'>
<brn-dialog-overlay hlm />
<button id='edit-profile' brnDialogTrigger hlmBtn>Edit Profile</button>
<div hlmDialogContent class='sm:max-w-[425px]' *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>
<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>
<button brnDialogClose hlm>
<span class='sr-only'>Close</span>
<hlm-icon class='flex h-4 w-4' size='100%' name='radixCross1' />
</button>
</div>
</brn-dialog>
`,
})
export class DialogPreviewComponent {}Installation
npx nx g @spartan-ng/nx:ui dialog
Usage
import {
BrnDialogCloseDirective,
BrnDialogComponent,
BrnDialogContentDirective,
BrnDialogDescriptionDirective,
BrnDialogOverlayComponent,
BrnDialogTitleDirective,
BrnDialogTriggerDirective,
} from '@spartan-ng/ui-dialog-brain';
import {
HlmDialogCloseDirective,
HlmDialogContentDirective,
HlmDialogDescriptionDirective,
HlmDialogFooterComponent,
HlmDialogHeaderComponent,
HlmDialogOverlayDirective,
HlmDialogTitleDirective,
} from '@spartan-ng/ui-dialog-helm';<brn-dialog closeDelay="100">
<brn-dialog-overlay hlm />
<button brnDialogTrigger hlmBtn>Edit Profile</button>
<div hlmDialogContent *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>
<button brnDialogClose hlm>
<span class="sr-only">Close</span>
<hlm-icon class="flex h-4 w-4" size="100%" name="radixCross1" />
</button>
</div>
</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
Using brnDialogTriggerFor outside of the current menu seems to close the menu when dismissing the dialog.
Right click here
import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { radixCross1 } from '@ng-icons/radix-icons';
import {
BrnDialogCloseDirective,
BrnDialogComponent,
BrnDialogContentDirective,
BrnDialogDescriptionDirective,
BrnDialogOverlayComponent,
BrnDialogTitleDirective,
BrnDialogTriggerDirective,
} from '@spartan-ng/ui-dialog-brain';
import {
HlmDialogCloseDirective,
HlmDialogContentDirective,
HlmDialogDescriptionDirective,
HlmDialogFooterComponent,
HlmDialogHeaderComponent,
HlmDialogOverlayDirective,
HlmDialogTitleDirective,
} from '@spartan-ng/ui-dialog-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmMenuDirective, HlmMenuItemDirective, HlmMenuShortcutComponent } from '@spartan-ng/ui-menu-helm';
import { BrnContextMenuTriggerDirective, BrnMenuDirective, BrnMenuGroupDirective } from '@spartan-ng/ui-menu-brain';
@Component({
selector: 'spartan-dialog-context-menu',
standalone: true,
imports: [
BrnDialogComponent,
BrnDialogOverlayComponent,
BrnDialogTriggerDirective,
BrnDialogContentDirective,
BrnDialogCloseDirective,
BrnDialogTitleDirective,
BrnDialogDescriptionDirective,
HlmDialogOverlayDirective,
HlmDialogContentDirective,
HlmDialogHeaderComponent,
HlmDialogFooterComponent,
HlmDialogTitleDirective,
HlmDialogDescriptionDirective,
HlmDialogCloseDirective,
HlmLabelDirective,
HlmButtonDirective,
HlmInputDirective,
HlmIconComponent,
HlmButtonDirective,
HlmIconComponent,
HlmMenuItemDirective,
HlmMenuShortcutComponent,
BrnMenuGroupDirective,
BrnMenuDirective,
BrnContextMenuTriggerDirective,
HlmMenuDirective,
],
providers: [provideIcons({ radixCross1 })],
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>
<div hlm brnMenu class="w-64">
<div brnMenuGroup>
<button inset hlm brnMenuItem>
Save
<hlm-menu-shortcut>⌘S</hlm-menu-shortcut>
</button>
<button disabled inset hlm brnMenuItem>
Archive
<hlm-menu-shortcut>⌘A</hlm-menu-shortcut>
</button>
<brn-dialog #dialog="brnDialog" closeDelay="100">
<brn-dialog-overlay hlm />
<button inset hlm brnMenuItem brnDialogTrigger>
Print
<hlm-menu-shortcut>⌘P</hlm-menu-shortcut>
</button>
<div hlmDialogContent *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>
<button brnDialogClose hlm>
<span class="sr-only">Close</span>
<hlm-icon class="flex h-4 w-4" size="100%" name="radixCross1" />
</button>
</div>
</brn-dialog>
</div>
</div>
</ng-template>
`,
})
export class DialogContextMenuPreviewComponent {}