Angular Material Expansion Panel needs 3 clicks to open after close (Angular >10)

Question

After closing the Angular Material Expansion Panel via a boolean variable, it closes just fine but to reopen it again you will need to click it 3 times to reopen it. Apparently in Angular 6 it works just fine with the identical example but i obviously don't want to downgrade, i tried Angular 10 & 11 and it didn't work. I Also tried to close it via different ways like the panel's close method etc but no difference.

Short gif showing the problem

Stackblitz: Angular 11: https://stackblitz.com/edit/angular-ivy-4qj1n9?file=src%2Fapp%2Fapp.component.html

Angular 6 https://stackblitz.com/edit/material-all-examples-quprqw?file=app%2Fapp.module.ts

€dit: I was able to create a version without that weird behaviour but instead it has no animation which is bad also.. https://stackblitz.com/edit/angular-ivy-ar4tjp?file=src%2Fapp%2Fapp.component.html

score 0 · Answer 1 · answered Mar 15 '21 at 12:15

From what I can tell it is some sort of a rendering problem that fails to update/render the expended row. What I've done is nowhere near perfect but it works so use it if you wish. I am tracking the menu opened/closed status and based on that I am fully rendering the expended button & expansion panel.

In component.ts I added the variable:

  menuOpen = false;

and In the component.html I did:

<button mat-icon-button [matMenuTriggerFor]="menu"
(click)="menuOpen=true"
(menuClosed)="langExpanded=false; menuOpen=false;"
>

(notice the "menuOpen=false;")

And lastly for I added the *ngIf's to both the button and the expansion panel based on the "menuOpen" variable

<button *ngIf="menuOpen" class="mat-menu-item" style="display:inline;"
   (click)="$event.stopPropagation();  langExpanded=!langExpanded;">
    <mat-icon>translate</mat-icon>
    <span>Language</span>
    <mat-icon class="customexpandicon" *ngIf="!langExpanded; else expandedIcon">expand_more</mat-icon>
    <ng-template #expandedIcon><mat-icon class="customexpandicon">expand_less</mat-icon></ng-template>
  </button>

  <mat-expansion-panel *ngIf="menuOpen" #langPanel="matExpansionPanel" class="mat-elevation-z0"
    (click)="$event.stopPropagation()" [disabled]="true" [expanded]="langExpanded">

stackblitz with the changes applied: https://stackblitz.com/edit/angular-ivy-ylkbwu?file=src/app/app.component.html

in that case you actually see that something is happening when you open the menu which doesn't look clean at all ... it gets even more visible when you remove the lazyloading from the expPanel (remove the — NME, Mar 15 '21 at 14:39
@NME Indeed it does not look clean. That was the best solution I was able to come up with. You should explain your solution as answer so that if someone else views this post they can find your solution too — Can Oezlemis, Mar 15 '21 at 18:52

Angular Material Expansion Panel needs 3 clicks to open after close (Angular >10)

1 Answers1