Constructors

Section titled "Constructors"

IgxExpansionPanelComponent 

new IgxExpansionPanelComponent(): IgxExpansionPanelComponent

Returns IgxExpansionPanelComponent

Properties

Section titled "Properties"

collapsed

Section titled "collapsed"

Gets/sets whether the component is collapsed (its content is hidden) Get

const myPanelState: boolean = this.panel.collapsed;

Set

this.panel.collapsed = true;

Two-way data binding:

<igx-expansion-panel [(collapsed)]="model.isCollapsed"></igx-expansion-panel>
collapsed: boolean = true

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:130

contentCollapsed

Section titled "contentCollapsed"

Emitted when the expansion panel finishes collapsing

handleCollapsed(event: IExpansionPanelEventArgs)
<igx-expansion-panel (contentCollapsed)="handleCollapsed($event)">
     ...
 </igx-expansion-panel>
contentCollapsed: EventEmitter<IExpansionPanelEventArgs>

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:164

contentCollapsing

Section titled "contentCollapsing"

Emitted when the expansion panel starts collapsing

handleCollapsing(event: IExpansionPanelCancelableEventArgs)
<igx-expansion-panel (contentCollapsing)="handleCollapsing($event)">
     ...
 </igx-expansion-panel>
contentCollapsing: EventEmitter<IExpansionPanelCancelableEventArgs>

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:150

contentExpanded

Section titled "contentExpanded"

Emitted when the expansion panel finishes expanding

handleExpanded(event: IExpansionPanelEventArgs)
<igx-expansion-panel (contentExpanded)="handleExpanded($event)">
     ...
 </igx-expansion-panel>
contentExpanded: EventEmitter<IExpansionPanelEventArgs>

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:192

contentExpanding

Section titled "contentExpanding"

Emitted when the expansion panel starts expanding

handleExpanding(event: IExpansionPanelCancelableEventArgs)
<igx-expansion-panel (contentExpanding)="handleExpanding($event)">
     ...
 </igx-expansion-panel>
contentExpanding: EventEmitter<IExpansionPanelCancelableEventArgs>

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:178

id

Section titled "id"

Sets/gets the id of the expansion panel component. If not set, id will have value "igx-expansion-panel-0";

<igx-expansion-panel id = "my-first-expansion-panel"></igx-expansion-panel>
let panelId =  this.panel.id;
id: string

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:91

Accessors

Section titled "Accessors"

animationSettings

Section titled "animationSettings"

Sets/gets the animation settings of the expansion panel component Open and Close animation should be passed

Get

const currentAnimations = this.panel.animationSettings;

Set

import { slideInLeft, slideOutRight } from 'igniteui-angular';
 ...
 this.panel.animationsSettings = {
     openAnimation: slideInLeft,
     closeAnimation: slideOutRight
};

or via template

import { slideInLeft, slideOutRight } from 'igniteui-angular';
 ...
 myCustomAnimationObject = {
     openAnimation: slideInLeft,
     closeAnimation: slideOutRight
};

html <igx-expansion-panel [animationSettings]='myCustomAnimationObject'> ... 

get animationSettings(): ToggleAnimationSettings

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:70

Returns ToggleAnimationSettings 

set animationSettings(value: ToggleAnimationSettings): void

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

Parameters

  • value: ToggleAnimationSettings

Returns void

Methods

Section titled "Methods"

close

Section titled "close" 
close(evt: Event): void

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:316

Parameters

  • evt: Event

Returns void

collapse

Section titled "collapse"

Collapses the panel

<igx-expansion-panel #myPanel>
     ...
 </igx-expansion-panel>
 <button type="button" igxButton (click)="myPanel.collapse($event)">Collpase Panel</button>
collapse(evt: Event): void

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:241

Parameters

  • evt: Event

Returns void

expand

Section titled "expand"

Expands the panel

<igx-expansion-panel #myPanel>
     ...
 </igx-expansion-panel>
 <button type="button" igxButton (click)="myPanel.expand($event)">Expand Panel</button>
expand(evt: Event): void

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:273

Parameters

  • evt: Event

Returns void

open

Section titled "open" 
open(evt: Event): void

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:312

Parameters

  • evt: Event

Returns void

toggle

Section titled "toggle"

Toggles the panel

<igx-expansion-panel #myPanel>
     ...
 </igx-expansion-panel>
 <button type="button" igxButton (click)="myPanel.toggle($event)">Expand Panel</button>
toggle(evt: Event): void

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:304

Parameters

  • evt: Event

Returns void