tabs: nested mat-tab-group with custom label template puts label on parent tab too
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
#### Bug, feature request, or proposal:
Bug
#### What is the expected behavior?
Should be able to use a custom tab label template in a sub tab but not in a parent tab.
#### What is the current behavior?
Having a mat-tab-group within a mat-tab-group with the child mat-tab-group having mat-tab items with a custom tab template (using ng-template) puts the custom tab content on the parent tab too.
#### What are the steps to reproduce?
StackBlitz repro: https://stackblitz.com/edit/angular-7njwul
#### What is the use-case or motivation for changing an existing behavior?
Not possible to use a custom tab label template on child tabs without breaking the parent tabs.
#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Browsers - all
Material: 5.2.4 (+?)
Angular 5
#### Is there anything else we should know?
Nope
Contributor guide
Research direction
Start by running the linked StackBlitz reproduction with the nested mat-tab-group, child mat-tab items, custom label template, and ng-template. Trace how the custom label is applied to parent and child tabs, then verify that the custom content appears only on the child tabs without affecting the parent tabs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100