How to dynamically change the color of text on a material angular2 tab on click?

Question

I am using angular2/4 and material

http://material.angular.io/guide/getting-started

My issue is, I want the color of the tab text to change as soon as I click on it.

[ngStyle] appears to not work on the tabs dynamically. I want to customize the color of text in a tab as soon as I click the text on the tab, but nothing changes! How can I get around this?

Note: I do notice that if I click a button to route to another page of my app, then click on another button to come back to the page with the mat-tabs, that I see the color of the text changed.

It appears the backend variable is being updated in variable "listoftabs", but the text color just doesn't change on the fly unless you 're-render' the tabs somehow.

Is there a way around this?

Typescript:

thetab = {isYellow: false, tabname: 'Hello'}

changecolor(tabclicked) {
    tabclicked.isYellow = !tabclicked.isYellow;
}

TEMPLATE

            <mat-tab-group>
                <mat-tab>
                    <ng-template mat-tab-label>
                        <a (click)="changecolor()"><span [style.color]="thetab.isYellow ? 'yellow' : 'red'">Text I Want to Change Color</span> {{thetab.tabname}}</a>
                    </ng-template>
                    <div>
                    Tab Content Here           
                    </div>
                </mat-tab>
           </mat-tab-group>

Narm Narm · Accepted Answer · 2018-02-21T19:10:27

You can use the (selectedTabChange) event to tell when the tab has changed and set the style on a tag in the label. See working StackBlitz.

StackBlitz example

How to dynamically change the color of text on a material angular2 tab on click?

1 Answers