Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Default
A standard dialog with header, content, and footer. Ideal for forms or quick actions.
dialog-example-default.ts
Declarative Usage
Control the dialog state using signals and observables. Open the dialog by entering the correct passphrase.
Hint: The secret word is sparta
dialog-example-declarative.ts
Closing Methods
Different ways to close the dialog programmatically or via directives.
dialog-example-close.ts
API Reference
Brain API
Core functionality for managing dialog states and portals.
| Directive | Selector | Inputs / Outputs |
|---|---|---|
| BrnDialog | brn-dialog |
|
| BrnDialogTrigger | [brnDialogTrigger] | Handles opening the dialog on click. |
Helm API
Styling components following the spartan/ui design system.
| Component | Selector | Description |
|---|---|---|
| HlmDialogContent | hlm-dialog-content | The main container for the dialog's visual content. |
| HlmDialogHeader | hlm-dialog-header | Standard header with title and description support. |
| HlmDialogFooter | hlm-dialog-footer | Aligned container for action buttons. |
| HlmDialogTitle | [hlmDialogTitle] | Directive to style the dialog heading. |
| HlmDialogDescription | [hlmDialogDescription] | Directive to style the secondary descriptive text. |