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

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

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

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

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

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

animationSettings

Section titled "animationSettings" 
animationSettings: ToggleAnimationSettings

Defined in projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:68, projects/igniteui-angular/expansion-panel/src/expansion-panel/expansion-panel.component.ts:71

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

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

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

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

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

Parameters

  • evt: Event

Returns void