angular / angular/components

bug(tabs): Change props name mat-tab

Open
#31,253 1 comment 0 reactions 0 assignees View on GitHub
area: material/tabs P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [x] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

19.2.17

### Description

Properties mat-tabs not migrated using ng update.

`--mat-tab-header-*` properties were not migrated removing "header".
`--mdc-tab-indicator` only changed `--mdc-tab-indicator-*` to `--mat-tab-*` but ` *-indicator*` was not removed

### Reproduction

![Image](https://github.com/user-attachments/assets/2b94c724-60ef-4803-abbb-59e832fa2214)

### Expected Behavior

![Image](https://github.com/user-attachments/assets/c78955e7-fe0b-4b36-a1af-b333352b200d)

### Actual Behavior

![Image](https://github.com/user-attachments/assets/ec6c3c1f-4d84-4592-bdc3-1fe55b20671e)

### Environment

Angular CLI: 20.0.0
Node: 22.13.1
Package Manager: npm 10.9.2
OS: linux x64

Angular: 20.0.0
... animations, build, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... router

Package Version
------------------------------------------------------------
@angular-devkit/architect 0.2000.0
@angular-devkit/core 20.0.0
@angular-devkit/schematics 20.0.0
@angular/cdk 20.0.1
@angular/material 20.0.1
@angular/material-moment-adapter 20.0.1
@schematics/angular 20.0.0
rxjs 7.8.2
typescript 5.8.3

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the migration with Angular Material 20 and `ng update`, focusing on the tab-related CSS custom properties described in the issue. Trace the Angular Material migration entry point and verify that the `mat-tab-header` and `mdc-tab-indicator` names are transformed to their expected replacements without leftover segments.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, tooling
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.