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.
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">
<div class="accordion-item">
<h3>
<button ngAccordionTrigger [panel]="panel1">Item 1</button>
</h3>
<div ngAccordionPanel #panel1="ngAccordionPanel">
<ng-template ngAccordionContent>
<p>Content for Item 1.</p>
</ng-template>
</div>
</div>
<div class="accordion-item">
<h3>
<button ngAccordionTrigger [panel]="panel2">Item 2</button>
</h3>
<div ngAccordionPanel #panel2="ngAccordionPanel">
<ng-template ngAccordionContent>
<p>Content for Item 2.</p>
</ng-template>
</div>
</div>
</div>