constructor

• new IgxExpansionPanelComponent(): IgxExpansionPanelComponent

  Returns IgxExpansionPanelComponent

collapsed

 const myPanelState: boolean = this.panel.collapsed;
Copy

 this.panel.collapsed = true;
Copy

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

contentCollapsed

 handleCollapsed(event: IExpansionPanelEventArgs)
Copy

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

contentCollapsing

 handleCollapsing(event: IExpansionPanelCancelableEventArgs)
Copy

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

contentExpanded

 handleExpanded(event: IExpansionPanelEventArgs)
Copy

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

contentExpanding

 handleExpanding(event: IExpansionPanelCancelableEventArgs)
Copy

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

id

<igx-expansion-panel id = "my-first-expansion-panel"></igx-expansion-panel>
Copy

let panelId =  this.panel.id;
Copy

animationSettings

• get animationSettings(): ToggleAnimationSettings

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

  Get

   const currentAnimations = this.panel.animationSettings;
  Copy

  Set

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

  or via template

   import { slideInLeft, slideOutRight } from 'igniteui-angular';
   ...
   myCustomAnimationObject = {
       openAnimation: slideInLeft,
       closeAnimation: slideOutRight
  };
  ```html
   <igx-expansion-panel [animationSettings]='myCustomAnimationObject'>
   ...
   </igx-expansion-panel>
  Copy

  Returns ToggleAnimationSettings

• set animationSettings(value: ToggleAnimationSettings): void

  Parameters

  • value: ToggleAnimationSettings

  Returns void

close

• close(evt?: Event): void

  Parameters

  • evt: Event

  Returns void

collapse

• collapse(evt?: Event): void

  Collapses the panel

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

  Parameters

  • evt: Event

  Returns void

expand

• expand(evt?: Event): void

  Expands the panel

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

  Parameters

  • evt: Event

  Returns void

open

• open(evt?: Event): void

  Parameters

  • evt: Event

  Returns void

toggle

• toggle(evt?: Event): void

  Toggles the panel

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

  Parameters

  • evt: Event

  Returns void