Class IgxAccordionComponent

IgxAccordion is a container-based component that contains that can house multiple expansion panels.

IgxAccordionModule

accordion

Layouts

The Ignite UI for Angular Accordion component enables the user to navigate among multiple collapsing panels displayed in a single container. The accordion offers keyboard navigation and API to control the underlying panels' expansion state.

<igx-accordion>
<igx-expansion-panel *ngFor="let panel of panels">
...
</igx-expansion-panel>
</igx-accordion>

Implements

  • AfterContentInit
  • AfterViewInit
  • OnDestroy

Constructors

Properties

id: string = ...

Get/Set the id of the accordion component. Default value is "igx-accordion-0";

<igx-accordion id="my-first-accordion"></igx-accordion>
const accordionId = this.accordion.id;
panelCollapsed: EventEmitter<IAccordionEventArgs> = ...

Emitted after a panel has been collapsed.

<igx-accordion (panelCollapsed)="handlePanelCollapsed($event)">
</igx-accordion>
panelCollapsing: EventEmitter<IAccordionCancelableEventArgs> = ...

Emitted before a panel is collapsed.

This event is cancelable.

<igx-accordion (panelCollapsing)="handlePanelCollapsing($event)">
</igx-accordion>
panelExpanded: EventEmitter<IAccordionEventArgs> = ...

Emitted after a panel has been expanded.

<igx-accordion (panelExpanded)="handlePanelExpanded($event)">
</igx-accordion>
public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) {
const expandedPanel: IgxExpansionPanelComponent = event.panel;
console.log("Panel is expanded: ", expandedPanel.id);
}
panelExpanding: EventEmitter<IAccordionCancelableEventArgs> = ...

Emitted before a panel is expanded.

This event is cancelable.

<igx-accordion (panelExpanding)="handlePanelExpanding($event)">
</igx-accordion>
public handlePanelExpanding(event: IExpansionPanelCancelableEventArgs){
const expandedPanel: IgxExpansionPanelComponent = event.panel;
if (expandedPanel.disabled) {
event.cancel = true;
}
}

Accessors

Methods