constructor

• new IgxAccordionComponent(cdr): IgxAccordionComponent

• Parameters

  • cdr: ChangeDetectorRef

  Returns IgxAccordionComponent

id

<igx-accordion id="my-first-accordion"></igx-accordion>
Copy

const accordionId = this.accordion.id;
Copy

panelCollapsed

<igx-accordion (panelCollapsed)="handlePanelCollapsed($event)">
</igx-accordion>
Copy

panelCollapsing

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

panelExpanded

<igx-accordion (panelExpanded)="handlePanelExpanded($event)">
</igx-accordion>
Copy

public handlePanelExpanded(event: IExpansionPanelCancelableEventArgs) {
 const expandedPanel: IgxExpansionPanelComponent = event.panel;
 console.log("Panel is expanded: ", expandedPanel.id);
}
Copy

panelExpanding

<igx-accordion (panelExpanding)="handlePanelExpanding($event)">
</igx-accordion>
Copy

public handlePanelExpanding(event: IExpansionPanelCancelableEventArgs){
 const expandedPanel: IgxExpansionPanelComponent = event.panel;
 if (expandedPanel.disabled) {
     event.cancel = true;
 }
}
Copy

animationSettings

• get animationSettings(): ToggleAnimationSettings

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

  <igx-accordion [animationSettings]="customAnimationSettings"></igx-accordion>
  Copy

  const customAnimationSettings: ToggleAnimationSettings = {
       openAnimation: growVerIn,
       closeAnimation: growVerOut
  };
  
  this.accordion.animationSettings = customAnimationSettings;
  Copy

  Returns ToggleAnimationSettings

• set animationSettings(value): void

• Parameters

  • value: ToggleAnimationSettings

  Returns void

panels

• get panels(): IgxExpansionPanelComponent[]

• Get all panels.

  const panels: IgxExpansionPanelComponent[] = this.accordion.panels;
  Copy

  Returns IgxExpansionPanelComponent[]

singleBranchExpand

• get singleBranchExpand(): boolean

• 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>
  Copy

  this.accordion.singleBranchExpand = false;
  Copy

  Returns boolean

• set singleBranchExpand(val): void

• Parameters

  • val: boolean

  Returns void

collapseAll

• collapseAll(): void

• Collapses all expanded expansion panels.

  accordion.collapseAll();
  Copy

  Returns void

expandAll

• expandAll(): void

• Expands all collapsed expansion panels.

  accordion.expandAll();
  Copy

  Returns void