A toolkit of Angular directives designed to construct a fully customizable and accessible dialog component.
Installation
Add and import the module into your imports section.
Modules
Standalone directives
Anatomy
Directive's set structure.
Input props
DialogRoot Attribute
The root directive for the dialog. Handles the state, configuration and keyboard navigation.
| Input | Default | Type | Required |
|---|---|---|---|
| open | false | boolean | false |
| modal | true | boolean | false |
| Output | Description | Returns |
|---|---|---|
| openChange | Returns true if it is opened, false otherwise | boolean |
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
DialogTrigger Attribute directive
The dialog trigger that opens the dialog.
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
Portal Structural directive
When used, portals send your content into the body.
| Input | Default | Type | Required |
|---|---|---|---|
| vacPortal* | — | string | HTMLElement | null | "parent" | false |
DialogOverlay Structural directive
A layer that covers the inert part of the view when the dialog is open.
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
DialogContent Attribute directive
Contains content to be rendered in the open dialog.
| Output | Description | Returns |
|---|---|---|
| pointerDownOutside | Event handler called when a pointer event occurs outside the bounds of the component. | PointerEvent |
| focusOutside | Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component. | FocusEvent |
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
DialogClose Attribute directive
The button trigger that closes the dialog.
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
DialogTitle Attribute directive Optional
An accessible title to be announced when the dialog is opened.
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
DialogDescription Attribute directive Optional
Description of the dialog.
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
State
DialogStateService injects an accordion state and exposes an API to interact with the items. Most of the time you wouldn't need it, but it is accessible within the template and it can be useful when we create a new directive or component to replace one of the current directives blocks. Each directive injects the root instance to handle the accordion accessibility and logic.
Access directive API with exportAS
We can access the state of the accordion using a template variable. All the directives expose themself with the same name, for example, in the previous demo we are using #accItem="accordionItem". With accItem we have access to the directive's attributes and also the state service.
Example
We could use it with any other directive. For example with #image="vacAvatarRoot" and access the state.
State API - AccordionStateService
Documentation for the accordion state service API.
Variables
| Name | Type | Default |
|---|---|---|
| open | Signal<boolean> | false |
| modal | Signal<boolean> | true |
| dataState | Signal<"open" | "closed"> | false |
Accessibility
This accordion component is designed in accordance with the WAI-ARIA Authoring Practices Guide. For more details on accessibility features and guidelines, please refer to the WAI-ARIA Dialog Practices. This ensures our component meets modern accessibility standards, providing an inclusive user experience.
Keyboard Navigation
Keyboard navigation uses an internal directive system to control the keyboard flow. You can read more about it in KeyboardNavigationDirective. KeyboardNavigationDirective props are extended directly in the AccordionRoot directive.
| Key | Description |
|---|---|
| Tab | Moves focus to the next focusable element. |
| Shift + Tab | Moves focus to the previous focusable element. |
| Space | Opens or closes the dialog. |
| Enter | Opens or closes the dialog. |
| Escape | Closes the dialog and moves focus to the trigger. |