Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
import { Component } from '@angular/core';
import { BrnAlertDialogContent, BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
import {
HlmAlertDialog,
HlmAlertDialogActionButton,
HlmAlertDialogCancelButton,
HlmAlertDialogContent,
HlmAlertDialogDescription,
HlmAlertDialogFooter,
HlmAlertDialogHeader,
HlmAlertDialogTitle,
} from '@spartan-ng/helm/alert-dialog';
import { HlmButton } from '@spartan-ng/helm/button';
@Component({
selector: 'spartan-alert-dialog-preview',
imports: [
BrnAlertDialogTrigger,
BrnAlertDialogContent,
HlmAlertDialog,
HlmAlertDialogHeader,
HlmAlertDialogFooter,
HlmAlertDialogTitle,
HlmAlertDialogDescription,
HlmAlertDialogCancelButton,
HlmAlertDialogActionButton,
HlmAlertDialogContent,
HlmButton,
],
template: `
<hlm-alert-dialog>
<button id="edit-profile" variant="outline" brnAlertDialogTrigger hlmBtn>Show Dialog</button>
<hlm-alert-dialog-content *brnAlertDialogContent="let ctx">
<hlm-alert-dialog-header>
<h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
<p hlmAlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from our
servers.
</p>
</hlm-alert-dialog-header>
<hlm-alert-dialog-footer>
<button hlmAlertDialogCancel (click)="ctx.close()">Cancel</button>
<button hlmAlertDialogAction (click)="ctx.close()">Continue</button>
</hlm-alert-dialog-footer>
</hlm-alert-dialog-content>
</hlm-alert-dialog>
`,
})
export class AlertDialogPreview {}
Installation
npx nx g @spartan-ng/cli:ui alert-dialog
ng g @spartan-ng/cli:ui alert-dialog
Usage
import { BrnAlertDialogContentDirective, BrnAlertDialogTriggerDirective } from '@spartan-ng/brain/alert-dialog';
import {
HlmAlertDialogActionButton
HlmAlertDialogCancelButton
HlmAlertDialog
HlmAlertDialogContent
HlmAlertDialogDescription
HlmAlertDialogFooter
HlmAlertDialogHeader
HlmAlertDialogOverlay
HlmAlertDialogTitle
} from '@spartan-ng/helm/alert-dialog';
<hlm-alert-dialog>
<button id="edit-profile" variant="outline" brnAlertDialogTrigger hlmBtn>Show Dialog</button>
<hlm-alert-dialog-content *brnAlertDialogContent="let ctx">
<hlm-alert-dialog-header>
<h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
<p hlmAlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from our
servers.
</p>
</hlm-alert-dialog-header>
<hlm-alert-dialog-footer>
<button hlmAlertDialogCancel (click)="ctx.close()">Cancel</button>
<button hlmAlertDialogAction (click)="ctx.close()">Continue</button>
</hlm-alert-dialog-footer>
</hlm-alert-dialog-content>
</hlm-alert-dialog>
Brain API
BrnAlertDialogContent
Selector: [brnAlertDialogContent]
BrnAlertDialogDescription
Selector: [brnAlertDialogDescription]
BrnAlertDialogOverlay
Selector: brn-alert-dialog-overlay
BrnAlertDialogTitle
Selector: [brnAlertDialogTitle]
BrnAlertDialogTrigger
Selector: button[brnAlertDialogTrigger],button[brnAlertDialogTriggerFor]
Inputs
Prop | Type | Default | Description |
---|---|---|---|
brnAlertDialogTriggerFor | BrnAlertDialog | undefined | - | - |
type | 'button' | 'submit' | 'reset' | button | - |
BrnAlertDialog
Selector: brn-alert-dialog
ExportAs: brnAlertDialog
Helm API
HlmAlertDialogActionButton
Selector: button[hlmAlertDialogAction]
HlmAlertDialogCancelButton
Selector: button[hlmAlertDialogCancel]
HlmAlertDialogContent
Selector: hlm-alert-dialog-content
Inputs
Prop | Type | Default | Description |
---|---|---|---|
class | ClassValue | - | - |
HlmAlertDialogDescription
Selector: [hlmAlertDialogDescription]
Inputs
Prop | Type | Default | Description |
---|---|---|---|
class | ClassValue | - | - |
HlmAlertDialogFooter
Selector: hlm-alert-dialog-footer
Inputs
Prop | Type | Default | Description |
---|---|---|---|
class | ClassValue | - | - |
HlmAlertDialogHeader
Selector: hlm-alert-dialog-header
Inputs
Prop | Type | Default | Description |
---|---|---|---|
class | ClassValue | - | - |
HlmAlertDialogOverlay
Selector: [hlmAlertDialogOverlay],brn-alert-dialog-overlay[hlm]
Inputs
Prop | Type | Default | Description |
---|---|---|---|
class | ClassValue | - | - |
HlmAlertDialogTitle
Selector: [hlmAlertDialogTitle]
Inputs
Prop | Type | Default | Description |
---|---|---|---|
class | ClassValue | - | - |
HlmAlertDialog
Selector: hlm-alert-dialog
ExportAs: hlmAlertDialog