Angular 材料标签 isActive

Question

I'm trying to use tabs from angular material ( https://material.angular.io/components/tabs/api )

Doc specifies that there is an isActive property but I don't know how to use it, how do I change my image (when the tab is active) what am I doing wrong in my exemple?

<mat-tab label="all" isActive="iconAllOn=true">
    <ng-template mat-tab-label>
        <div (mouseover)="iconAllOn=true" (mouseout)="iconAllOn=false">
            <img class="logoNavBar" *ngIf="!iconAllOn" [src]="imagePathAllOff">
            <img class="logoNavBar" *ngIf="iconAllOn" [src]="imagePathAllOn">
        </div>
    </ng-template> 
    Content 1
</mat-tab>

Answer 1

isActive is not a @Input property, you can't set the value to it. Check the following example, here a form field is used to set the active tab. https://stackblitz.com/angular/dgkalqaqdlv?file=src%2Fapp%2Ftab-group-dynamic-example.ts

MatTabGroup supports setting up the selected index. API

Are you trying to set some style on mouseHover? Active tab styling can be done in a different way

Here is an example:

https://stackblitz.com/angular/mkjxrrgbdak?file=src%2Fstyles.scss

I have added basic styling, it is not a proper way to style tab but it can be achieved.

Answer 2

A little late here, but you could do something like the following. Not entirely sure how you want it to behave.

<mat-tab #allTab label="all">
    <ng-template mat-tab-label>
        <div (mouseover)="iconAllOn = true" (mouseout)="iconAllOn = false">
            <img class="logoNavBar" *ngIf="!iconAllOn || !allTab.isActive" [src]="imagePathAllOff">
            <img class="logoNavBar" *ngIf="iconAllOn || allTab.isActive" [src]="imagePathAllOn">
        </div>
    </ng-template> 
    Content 1
</mat-tab>