A toolkit of Angular directives designed to construct a fully customizable accordion, enabling developers to define interactive, collapsible content areas tailored to specific application needs.
Installation
Add and import the module into your imports section.
Module
Standalone directives
Anatomy
Directive's set structure.
Input props
CollapsibleRoot Attribute Directive
The root directive for the collapsible. Handles the state and bindings.
| Input | Default | Type | Required |
|---|---|---|---|
| open | false | boolean | false |
| disabled | false | boolean | false |
| Output | Description | Returns |
|---|---|---|
| openChange | Event handler emitted when the state of the collapsible changes | boolean |
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | Shows when disabled |
CollapsibleTrigger Attribute Directive
A directive to bind the state and the accessibility rules to the trigger element.
CollapsibleContent Attribute Directive
A directive to bind the state and the accessibility rules to the content element. To hide the content, you can use an @if or hide it with css like in the previous example. If you didn't set a state, you can access the open state with directive.state.open(). You can find an example in the state section.
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | Shows when disabled |
State
CollapsibleStateService allows to control the inputs and toggle of the collapsible.
Access directive API with exportAS
We can access the state of the collapsible using a template variable. All the directives expose themself with the same name. 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 #root="vacCollapsibleRoot" and access the state.
State API - CollapsibleStateService
Documentation for the collapsible state service API.
Variables
| Name | Default | Type |
|---|---|---|
| open | false | WritableSignal<boolean> |
| disabled | false | WritableSignal<boolean> |
Methods
| Method | Arguments | Return |
|---|---|---|
| toggleOpen | — | void |
Accessibility
This collapsible set of directives 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 Collapsible Practices. This ensures our component meets modern accessibility standards, providing an inclusive user experience.
Keyboard Navigation
When we focus the trigger directive vacCollapsibleTrigger we can toggle it.
| Key | Description |
|---|---|
| Space | Toggle the collapsible state. |
| Enter | Toggle the collapsible state. |