Can't assign custom class for mat-tab

[cziberpv]

What is the expected behavior?

[ngClass] used on mat-tab should add class on "mat-tab-label" div

What is the current behavior?

There is no way to add custom class to "mat-tab-label" div

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-xq3ql9

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

7.3.7

Is there anything else we should know?

[andrewseguin]

You can provide your own custom content for the tab label but I agree there is no great way to style the entire label (not just text).

https://stackblitz.com/edit/angular-material2-issue-epfe1y?file=app/app.component.ts

[niekvb]

Duplicate of #9290

[asphub]

We can tweak with <ng-template> to add a class for styling the mat-tab-panel

HTML

---

<mat-tab>
    <ng-template mat-tab-label>
        <span class="deleteTab">Delete Tab</span>
    </ng-template>
...
</mat-tab>

CSS

---

.deleteTab {
color: red;
}

[liesahead]

So, the labelClass input does not work?

Update: works in 13.2.0, great!

[spedroq]

Yeah having a way to define classes for the automatically generated components would be very useful. Currently there is no way to differentiate between the different mat-tab-body-content for example. In other projects I have seen the approach of allowing a bodyClass attribute to be passed for example.

[exo-pla-net]

labelClass and bodyClass are still broken.

They don't conform to the docs, nor do they seem to do anything.

[msmallest]

@exo-pla-net

It seems that the corresponding style definition for the labelClass and bodyClass need to be done in the respective material theme file or app's root style file

Here is a working example I made from the v14 docs, but it works for v17 too https://stackblitz.com/edit/y3qw5m?file=src%2Fapp%2Ftab-group-align-example.html