IgxAccordion is a container-based component that contains that can house multiple expansion panels.
Igx Module
IgxAccordionModule
Igx Keywords
accordion
Igx Group
Layouts

Remarks

[object Object]

Example

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

Constructors

Section titled "Constructors"

IgxAccordionComponent

new IgxAccordionComponent(): IgxAccordionComponent

Returns IgxAccordionComponent

Properties

Section titled "Properties"

id

Section titled "id"

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;
id: string

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:73

panelCollapsed

Section titled "panelCollapsed"

Emitted after a panel has been collapsed.

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

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:199

panelCollapsing

Section titled "panelCollapsing"

Emitted before a panel is collapsed.

 
panelCollapsing: EventEmitter<IAccordionCancelableEventArgs>

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:188

Remarks

This event is cancelable.

<igx-accordion (panelCollapsing)="handlePanelCollapsing($event)">
</igx-accordion>

panelExpanded

Section titled "panelExpanded"

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);
}
panelExpanded: EventEmitter<IAccordionEventArgs>

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:174

panelExpanding

Section titled "panelExpanding"

Emitted before a panel is expanded.

 
panelExpanding: EventEmitter<IAccordionCancelableEventArgs>

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:156

Remarks

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;
 }
}

animationSettings

Section titled "animationSettings" 
animationSettings: ToggleAnimationSettings

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:100, projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:104

singleBranchExpand

Section titled "singleBranchExpand" 
singleBranchExpand: boolean

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:124, projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:128

Accessors

Section titled "Accessors"

panels

Section titled "panels"

Get all panels.

const panels: IgxExpansionPanelComponent[] = this.accordion.panels;
get panels(): IgxExpansionPanelComponent[]

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:208

Returns IgxExpansionPanelComponent[]

Methods

Section titled "Methods"

collapseAll

Section titled "collapseAll"

Collapses all expanded expansion panels.

accordion.collapseAll();
collapseAll(): void

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:274

Returns void

expandAll

Section titled "expandAll"

Expands all collapsed expansion panels.

accordion.expandAll();
expandAll(): void

Defined in projects/igniteui-angular/accordion/src/accordion/accordion.component.ts:255

Returns void