angular / angular/components

tabs: nested mat-tab-group with custom label template puts label on parent tab too

Open
#10,441 8 comments 0 reactions 0 assignees View on GitHub
area: material/tabs help wanted P4
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.