Mat expansion panel is not working properly in mat tab

Question

https://stackblitz.com/edit/angular-material2-issue-1vt6en?file=app/app.component.html

Please check tab two it is not expanded properly.

How to fix it.

Answer 1

Firstly, consider updating your Angular dependencies to 6.x.x, where Angular Material has support for lazy-loading of tab content.

---

From the docs for tabs:

By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initalize the child components but not inject them into the DOM until the tab is activated.

If the tab contains several complex child components or the tab's contents rely on DOM calculations during initialization, it is advised to lazy load the tab's content.

Anyways, you can leverage on the matTabContent attribute with ng-template, where its contents will be lazily loaded.

<mat-tab-group>
  <mat-tab label="Tab 1">
    <ng-template matTabContent>
      <p>Content goes here</p>
    </ng-template>
  </mat-tab>
  <mat-tab label="Tab 2">
    <ng-template matTabContent>
      <p>Content goes here</p>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Updated Stackblitz