CODEWITHSUNDEEP
angulartypescriptangular-materialmat-tab
MajorXbox
MajorXbox

Reputation: 533

mat-tab-group tabs not rendering after switching parent tabs

I have an example where I need to use nested tabs and tables.

https://stackblitz.com/edit/angular-bgl1f2

When I switch parent tabs (View M2) and then try to switch child tabs (M3), the tabs do not render. Rendering occurs only after switching child tabs (M3) multiple times.

Steps to Reproduce in the above Stackblitz:

  1. Open any M1 Expansion panel. This displays parent tabs (View M2) and child tabs (M3)
  2. Switch to child tab (M3 32 B)
  3. Switch to parent tab (View M2 - 2)
  4. Switch back to previous parent tab (View M2 - 1)
  5. Switch to child tab (M3 33 C)

Expected Result
A table should be displayed in child tab (M3 33 C)

Actual Result
Nothing is rendered in child tab (M3 33 C)

When you switch to a different child tab and then back to child tab (M3 33 C), table is displayed.

Can anyone point out what is wrong?

Upvotes: 6

Views: 893

Answers (1)

Christoph Polenz
Christoph Polenz

Reputation: 19

I know, i know a bit late. But i stumbled over this post in quest for a solution.

And i found one after all!

So here to share, and give back to the community

<ng-template matTabContent> did the trick for me

<mat-tab>
    <ng-template matTabContent>
        <div class="example-tab-content">
        ...
        </div>
    </ng-template>
</mat-tab>

Upvotes: 0

Related Questions