2

I have a mat-accordion which has a mat-expansion-panel set like this:

<mat-expansion-panel *ngFor="let item of menuItems; index as i" [hideToggle]="item.hideToggle" [expanded]="item.active">

You can see the "expanded" input is true if "item" has the boolean property "active" evaluating as true. Well, here is the weird part: if "item.active" is set synchronously, for example on the ngOnInit method of my component, everything works and the panel opens. However, if "item.active" is set asynchronously, e.g. inside a "subscribe" method of an observable, panel does not open. Why does this happen, and how can I fix it?

Thank you in advance, Thomas

Thomas Cafaro
  • 53
  • 1
  • 5

1 Answers1

0

I had a similar problem as this where I was loading the contents of the expansion panel asynchronously. The issue is caused by ngFor directive re-rendering the DOM when the contents change via the default trackByFunction implementation that returns the object as the identity.see here.

I got around this by providing my custom trackBy function

identify(index:number, item:any){
    return item.ExternalId;   // this is the unique id 
}

then invoking it in the template

<div *ngFor="let item of items;trackBy:identify">
Purusartha
  • 992
  • 4
  • 19
  • 33