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;
Emitted after a panel has been collapsed.
<igx-accordion (panelCollapsed)="handlePanelCollapsed($event)">
</igx-accordion>
Emitted before a panel is collapsed.
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);
}
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;
}
}
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 all panels.
const panels: IgxExpansionPanelComponent[] = this.accordion.panels;
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;
IgxAccordion is a container-based component that contains that can house multiple expansion panels.
Igx Module
IgxAccordionModule
Igx Keywords
accordion
Igx Group
Layouts
Remark
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.
Example