constructor

• new IgxExpansionPanelComponent(animationService, cdr, elementRef?): IgxExpansionPanelComponent

• Parameters

  • animationService: AnimationService

  • cdr: ChangeDetectorRef

  • Optional elementRef: ElementRef<any>

  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): void

• Parameters

  • value: ToggleAnimationSettings

  Returns void

close

• close(evt?): void

• Parameters

  • Optional evt: Event

  Returns void

collapse

• collapse(evt?): void

• Collapses the panel

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

  Parameters

  • Optional evt: Event

  Returns void

expand

• expand(evt?): void

• Expands the panel

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

  Parameters

  • Optional evt: Event

  Returns void

open

• open(evt?): void

• Parameters

  • Optional evt: Event

  Returns void

toggle

• toggle(evt?): void

• Toggles the panel

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

  Parameters

  • Optional evt: Event

  Returns void