Angular Аккордеоны материалов не закрываются при первом рендеринге

Question

Я динамически добавляю Accordions на вкладку. Все панели должны быть закрыты с самого начала. Но на короткое время панели расширяются. Особенно это видно в Firefox. Что еще я могу сделать, чтобы мои панели закрывались также при первом рендеринге?

 <ng-container *ngFor="let item of list|keyvalue:keepOriginalOrder">
     <div *ngIf="item.value.typ==='accordion'">
              <mat-accordion>
                <mat-expansion-panel [expanded]='false'>
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      title
                    </mat-panel-title>
                  </mat-expansion-panel-header>
                  <div>
                      content
                  </div>
                </mat-expansion-panel>
              </mat-accordion>
    </div>
 </ng-container>

Answer 1

нашел решение. Ошибка описана здесь: https://github.com/angular/components/issues/11765

Я добавил в свой файл styles.s css

mat-accordion mat-expansion-panel {
  mat-expansion-panel-header {
    height: 40px; // height may be different for you
  }
  .mat-expansion-panel-content {
    height: 0;
  }
  &.mat-expanded {
    mat-expansion-panel-header {
      height: 64px; // height may be different for you
    }
    .mat-expansion-panel-content {
      height: auto;
    }
  }
}