AccordionGroup - Angular

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

HTMLElement

A 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

void

Expands all accordion panels if multi-expandable.

@returnsvoid

collapseAll

void

Collapses all accordion panels.

@returnsvoid

Description

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>