AccordionTrigger — Angular

The trigger that toggles the visibility of its associated ngAccordionPanel.

API

class AccordionTrigger implements OnInit ,OnDestroy {
  readonly element: HTMLElement;
  readonly @Input() panel: InputSignal<AccordionPanel>;
  readonly @Input() id: InputSignal<any>;
  readonly panelId: Signal<any>;
  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.

panel

InputSignal<AccordionPanel>

The associated AccordionPanel.

id

InputSignal<any>

The unique identifier for the trigger.

panelId

Signal<any>

The unique identifier for the corresponding trigger panel.

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.

ngOnInit

void

@returnsvoid

ngOnDestroy

void

@returnsvoid

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 the panel input be set to the template reference 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 [panel]="panel">
  Accordion Trigger Text
</button>