Nested Angular material tabs

Question

I have a requirement for adding dynamic tabs to some User Preferences screen. The main preference tab can be a static tab with static content, but the second tab should have nested mat-tab elements.

These additional dynamic preferences come from the backend, which then allows me to use an *ngFor to render the extra tabs.

Problem I'm seeing now is with the tab labels. The label text is taking its value from the first nested tab, and NOT from the label property I'm setting.

Please see my example here on stackblitz - https://stackblitz.com/edit/mat-tabs-nested?embed=1&file=app/tab-group-async-example.html

A code snippet from the online project is:

If you click on "More Dynamic Preferences" tab, then the tab header text becomes "First". Same happens on the second tab, whose tab content I'm loading synchronous, as opposed to the async example.

Answer 1

This issue is being caused by the way label is being set for tab.

You are setting label of parent with attribute label however for child tab you had used the template way to define it.

<ng-template mat-tab-label>{{tab.label}}</ng-template>

So what you can do is either you define the label of parent tab same or just add label attribute for the child tabs too.

Here is working copy - https://stackblitz.com/edit/mat-tabs-nested-n77qed