Accordion 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:74

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:200

panelCollapsing

Section titled "panelCollapsing"

Emitted before a panel is collapsed.

 
panelCollapsing: EventEmitter<IAccordionCancelableEventArgs>

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

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:175

panelExpanding

Section titled "panelExpanding"

Emitted before a panel is expanded.

 
panelExpanding: EventEmitter<IAccordionCancelableEventArgs>

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

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

Accessors

Section titled "Accessors"

animationSettings

Section titled "animationSettings"

Get/Set the animation settings that panels should use when expanding/collpasing.

<igx-accordion [animationSettings]="customAnimationSettings"></igx-accordion>
const customAnimationSettings: ToggleAnimationSettings = {
     openAnimation: growVerIn,
     closeAnimation: growVerOut
};

this.accordion.animationSettings = customAnimationSettings;
get animationSettings(): ToggleAnimationSettings

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

Returns ToggleAnimationSettings 

set animationSettings(value: ToggleAnimationSettings): void

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

Parameters

  • value: ToggleAnimationSettings

Returns void

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:209

Returns IgxExpansionPanelComponent[]

singleBranchExpand

Section titled "singleBranchExpand"

Get/Set how the accordion handles the expansion of the projected expansion panels. If set to true, only a single panel can be expanded at a time, collapsing all others

<igx-accordion [singleBranchExpand]="true">
...
</igx-accordion>
this.accordion.singleBranchExpand = false;
get singleBranchExpand(): boolean

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

Returns boolean 

set singleBranchExpand(val: boolean): void

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

Parameters

  • val: boolean

Returns void

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:275

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:256

Returns void