Mat expansion panel is opened by default bug?

Question

Since Angular 5 release, I have some problem with my mat expansion panels. They are opened by default and I don't understand why.

my html

<div *ngFor="let block of blocks; let i = index;">
<mat-expansion-panel *ngIf="selectedIndex == 2" (closed)="onClosed(i)" (opened)="onOpened(i)" [expanded]="expansionPanelIndex === i">
    <mat-expansion-panel-header>
        <mat-panel-title>
           ....
        </mat-panel-title>
        <mat-panel-description>
           ...
        </mat-panel-description>
     </mat-expansion-panel-header>
</mat-expansion-panel>
</div>

in my component

    tabChanged(tabChangeEvent: MatTabChangeEvent): void {
        this.selectedIndex = tabChangeEvent.index;
    }

    onOpened(i) {
        this.expansionPanelIndex = i;
    }

    onClosed(i) {
      this.expansionPanelIndex = -1;
    }

EDIT : I updated Material to 5.1.1 same problem EDIT 2 : I had a "selectedTabIndex" in my tab-group

<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)">
...
<mat-expansion-panel ...>
</mat-expansion-panel>
</mat-tab-group>

The two way binding wasn't a good idea here. But now, I have another problem (click on nextStep button doesn't do anything)

What do you need the expansionPanelIndex for? Is it, because you want not more than one panel to be opened at a time? — Kim Kern
Yes that's it. I think I found my problem. I edited my first post. — Joe Allen

Joe Allen Joe Allen · Accepted Answer · 2018-02-06T09:51:08

I finally found the problem.

It was about this : *ngIf="selectedIndex == 2". I replaced it by a boolean which is updated when I change tab (MatTabChangeEvent)

    tabChanged( tabChangeEvent: MatTabChangeEvent ): void {
        this.selectedIndex = tabChangeEvent.index;

        if (this.selectedIndex == 2) {
            this.displayBlock = true;
        }
        else {
            this.displayBlock = false;
        }
    }

Mat expansion panel is opened by default bug?

2 Answers