Accordion for Angular

import { AuiAccordion } from '@absoluteui/angular/accordion';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Accordion page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { accordion: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { AccordionItem } from '@absoluteui/components/accordion';
import { AuiAccordion } from '@absoluteui/angular/accordion';

@Component({
  selector: 'app-faq',
  imports: [AuiAccordion],
  template: `<aui-accordion [items]="items" [headingLevel]="2" [value]="open" (changed)="open = $event.value"></aui-accordion>`,
})
export class FaqComponent {
  open: string[] = ['shipping'];
  readonly items: AccordionItem[] = [
    { id: 'shipping', title: 'Shipping', content: 'Orders ship within two business days.' },
    { id: 'returns', title: 'Returns', content: 'Returns are free for 30 days.' },
  ];
}

<aui-accordion>

Class AuiAccordion; template reference #ref="auiAccordion".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
items	readonly AccordionItem[]		Required. Items with unique ids. Titles and string content render as text.
icons	Partial<AccordionIcons>		Icon slot overrides.
multiple	boolean	false	Allow several panels open at once; otherwise expanding one collapses the others.
collapsible	boolean	true	Single mode: the open panel can be collapsed. When false its header is aria-disabled.
headingLevel	AccordionHeadingLevel	'3'	Heading element wrapping each header button.

Two-way bindings

Model	Type	Change output	Description
[(value)]	readonly string[]	(valueChange)	Expanded item ids (at most one when multiple is false).

Outputs

Output	Payload	Description
(changed)	AccordionChangeDetail	The user expanded or collapsed an item. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
panel(id: string): HTMLDivElement | null | undefined	Content container of an item’s panel.
expand(id: string): void	Expand programmatically (no events); collapses others in single mode.
collapse(id: string): void	Collapse programmatically (no events), even when not collapsible.
toggle(id: string): void	Expand or collapse programmatically (no events).