如何将自定义 class 添加到 Angular 材料选项卡？

Question

In Angular 6, I am using Angular Material to display some data using Tabs.

<mat-tab-group>
    <mat-tab 
    *ngFor="let bar of foo.bar" 
    [label]="bar.Name"
    [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'">
      // ...
    </mat-tab>
  </mat-tab-group>

I would like to style the tabs differently whether the IsActive property of bar is true or false .

I have tried using [ngClass]="bar.IsActive? 'bar-on': 'bar-off'" as shown above, but the class is not added.

Out of spite, I have tried the much simpler class = 'bar-on' but even then the class is not added.

Therefore, I am wondering, is it possible to add a custom class to an Angular Material tab?

Edit: The IsActive property is a property of foo objects. It has nothing to do with the activated state of the tab. The active tab can display an object with IsActive = false and vice-versa.

Answer 1

Yes its possible by using ng-template instead of label .

Example of ngClass on first tab. stackblitz

<mat-tab-group>
  <mat-tab > 
   <ng-template mat-tab-label>
                <span [ngClass]="{'color-red': isError?'red':'black'}">Security</span>
   </ng-template>
    Content 1 
   </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Answer 2

If you want to modify the active tab, use this:

.mat-tab-label-active {
 //your style here
}

If you want to modify the label style within the active tab, do this:

 .mat-tab-label-active .mat-tab-label-content {
   //your style here
 }

Answer 3

The API allows you to conditionnally set the color and background-color of the whole mat-tab-group but not to an individual mat-tab .

You can't do what you want to achieve unless you do some hacky native javascript...

Answer 4

或者你可以使用 ::ng-deep，谷歌它。

Answer 5

Target the element by attribue to apply style

:host::ng-deep .mat-tab-label[aria-posinset='1']{
    /*apply your css here*/
}

Answer 6

Seems like the <mat-tab> element gets removed, so if you want to add a CSS class to it, you can just wrap the tab contents in another div and add the class to that div.

Answer 7

I am using Angular 11 atm, and the label class feature was introduced later, so I have to do it differently.

But generally, with Angular 13+, this should be possible by using the @Input [labelClass]="my-classname" . https://material.angular.io/components/tabs/api

And instead of ::ng-deep , better use encapsulation: ViewEncapsulation.none , if you need to style elements from 3rd party imports.

Answer 8

Instead of using [ngClass] for highlighting an active tab, you could ..

.mat-tab-label-active{
//your code...
}

See this : https://stackoverflow.com/a/45962498/5319180

Also : https://github.com/angular/material2/issues/5014

EDIT : to get the domain specific info, as you said..maybe this would help?

<mat-tab *ngFor="let bar of bars">
     <ng-template mat-tab-label>
          <div [ngClass]="...your conditions">
            bar.heading
          </div>
      </ng-template>
       ...
       ...
  </mat-tab>

Answer 9

In Angular 6, I am using Angular Material to display some data using Tabs.

<mat-tab-group>
    <mat-tab 
    *ngFor="let bar of foo.bar" 
    [label]="bar.Name"
    [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'">
      // ...
    </mat-tab>
  </mat-tab-group>

I would like to style the tabs differently whether the IsActive property of bar is true or false .

I have tried using [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'" as shown above, but the class is not added.

Out of spite, I have tried the much simpler class = 'bar-on' but even then the class is not added.

Therefore, I am wondering, is it possible to add a custom class to an Angular Material tab?

Edit: The IsActive property is a property of foo objects. It has nothing to do with the activated state of the tab. The active tab can display an object with IsActive = false and vice-versa.