AccordionTrigger - Angular

The trigger that toggles the visibility of its associated ngAccordionPanel.

API

class AccordionTrigger {
  readonly element: HTMLElement;
  readonly @Input() id: InputSignal<any>;
  readonly @Input() panelId: InputSignal<string>;
  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() @Output('expandedChange') expanded: ModelSignal<boolean>;
  readonly active: Signal<any>;
  expand(): void;
  collapse(): void;
  toggle(): void;
}

element

HTMLElement

A reference to the trigger element.

id

InputSignal<any>

A unique identifier for the widget.

panelId

InputSignal<string>

A local unique identifier for the trigger, used to match with its panel's panelId.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the trigger is disabled.

expanded

ModelSignal<boolean>

Whether the corresponding panel is expanded.

active

Signal<any>

Whether the trigger is active.

expand

void

Expands this item.

@returnsvoid

collapse

void

Collapses this item.

@returnsvoid

toggle

void

Toggles the expansion state of this item.

@returnsvoid

Description

The trigger that toggles the visibility of its associated ngAccordionPanel.

This directive requires a panelId that must match the panelId of the ngAccordionPanel it controls. When clicked, it will expand or collapse the panel. It also handles keyboard interactions for navigation within the ngAccordionGroup. It applies role="button" and manages aria-expanded, aria-controls, and aria-disabled attributes for accessibility. The disabled input can be used to disable the trigger.

<button ngAccordionTrigger panelId="unique-id-1">
  Accordion Trigger Text
</button>