A container for a group of accordion items. It manages the overall state and interactions of the accordion, such as keyboard navigation and expansion mode.
API
class AccordionGroup { readonly element: HTMLElement; readonly textDirection: WritableSignal<Direction>; readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>; readonly @Input() multiExpandable: InputSignalWithTransform<boolean, unknown>; readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>; readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>; expandAll(): void; collapseAll(): void;}
element
HTMLElementA reference to the group element.
textDirection
WritableSignal<Direction>The text direction (ltr or rtl).
disabled
InputSignalWithTransform<boolean, unknown>Whether the entire accordion group is disabled.
multiExpandable
InputSignalWithTransform<boolean, unknown>Whether multiple accordion items can be expanded simultaneously.
softDisabled
InputSignalWithTransform<boolean, unknown>Whether to allow disabled items to receive focus. When true, disabled items are
focusable but not interactive. When false, disabled items are skipped during navigation.
wrap
InputSignalWithTransform<boolean, unknown>Whether keyboard navigation should wrap around from the last item to the first, and vice-versa.
expandAll
voidExpands all accordion panels if multi-expandable.
voidcollapseAll
voidCollapses all accordion panels.
voidDescription
A container for a group of accordion items. It manages the overall state and interactions of the accordion, such as keyboard navigation and expansion mode.
The ngAccordionGroup serves as the root of a group of accordion triggers and panels,
coordinating the behavior of the ngAccordionTrigger and ngAccordionPanel elements within it.
It supports both single and multiple expansion modes.
<div ngAccordionGroup [multiExpandable]="true" [(expandedPanels)]="expandedItems"> <div class="accordion-item"> <h3> <button ngAccordionTrigger panelId="item-1">Item 1</button> </h3> <div ngAccordionPanel panelId="item-1"> <ng-template ngAccordionContent> <p>Content for Item 1.</p> </ng-template> </div> </div> <div class="accordion-item"> <h3> <button ngAccordionTrigger panelId="item-2">Item 2</button> </h3> <div ngAccordionPanel panelId="item-2"> <ng-template ngAccordionContent> <p>Content for Item 2.</p> </ng-template> </div> </div></div>