Angular 7 Material Expansion Panel flicker

Question

i upgraded to Angular 7.1.0 with:

"@angular/animations": "^7.1.0",
"@angular/cdk": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/material": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/router": "^7.1.0"

I am using Angular Material Expansion Panels, which are initially expanded false through [expanded]="false".

The Body of the Expansion Panel is visible for some Milliseconds. It looks like a short jump from being expanded to not being expanded. Does anyone have the same issue?

<mat-expansion-panel-header>

  <mat-panel-title>
    <div class="NumberAccordionContentWrapper__centered">
      <h2 [class.NumberAccordion__notExpanded]="!isExpanded">{{ headline }}</h2>
    </div>
  </mat-panel-title>

</mat-expansion-panel-header>

<div class="NumberAccordionContentWrapper__centered">

  <ng-template tbHost></ng-template>

</div>

Answer 1

This is a bug. and there's an open issue for it.

It is caused when the expansion panel is contained and animated.

Click to see reproduce demo

The best workaround so far posted on this thread:

Click to see the workaround

Answer 2

This guy posted a temporary work around with css, that seems to work: https://github.com/angular/components/issues/11765#issuecomment-447991348

::ng-deep .ng-animating div mat-accordion mat-expansion-panel mat-expansion-panel-header {
    height: 48px;
  }
::ng-deep .ng-animating div mat-accordion mat-expansion-panel div.mat-expansion-panel-content {
    height: 0px;
    visibility: hidden;
}

I left away the ::ng-deep and added it to my global styles.