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.

<docs-anatomy [node]="componentStructure" />

Input props

AccordionRoot Attribute

The root directive for the accordion. Handles the accordion state, configuration and keyboard navigation.

<docs-table [columns]="columnsInput" [rows]="rootInputRows" />

AccordionItem Attribute

<docs-table [columns]="columnsInput" [rows]="itemInputRows" />

AccordionHeader Attribute Optional

Use this directive when your trigger is inside an non heading element (h1, h2...) to apply the correct accessibility rules.

<docs-table [columns]="columnsInput" [rows]="headerInputRows" />

AccordionTrigger Attribute

Toggle the accordion item and changes its state.

<docs-table [columns]="attributesColumns" [rows]="itemAttrRows" />

AccordionContent Attribute

Contains the collapsible content for an accordion item.

<docs-table [columns]="attributesColumns" [rows]="itemAttrRows" />

State

AccordionRootDirective 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.

<docs-code [code]="stateExample" language="html" />

State API - AccordionStateService

Documentation for the accordion state service API.

Variables

<docs-table [columns]="stateVarsColumns" [rows]="stateRows" />

Methods

<docs-table [columns]="stateMethodsColumns" [rows]="stateMethodRows" />

Types

Avatar types that you can import.

<docs-code [code]="models" language="ts" />

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 Accordion 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.

<docs-table [columns]="keyboardColumns" [rows]="keyboardRows" />

Examples

Build a custom trigger using the accordion state

We can create custom components/directives that will interact with the accordion state. It can be useful when we need to implement custom logic into one or more of our pieces. Remember we could use the AccordionTriggerDirective inside our component instead of implementing our custom logic. To continue, create a component wrap for the desired functionality and implement your custom logic. Remember to implement the necessary accessibility attributes.

<docs-code [code]="example1" language="ts" />

Once we created our trigger component. We can implement it inside the root directive.

<docs-code [code]="example2" language="ts" />