Clever Geek Handbook

How can I change the icon of a material in a click event using angular2 / 4 material?

I have the following icon in md-tab-group:

<md-tab-group>
  <md-tab *ngFor="let tab of arrayOfTabs">
    <ng-template md-tab-label>
        <md-icon (click)="changetab()">close</md-icon>
    </ng-template>
    My Tab Content
</md-tab>
</md-tab-group>

I want to make the material change to a star icon instead of a close icon. How can I accomplish this via the icon click event for that particular tab?

+3


source to share


2 answers


In component:

public icon = 'close'; 

public changeIcon(newIcon: string ){
    this.icon = newIcon ; 
}


In HTML

<md-icon (click)="changeIcon('star')>{{icon}}</md-icon>
+6


source


Typescript

let iconName = 'delete'; 

changeIcon(newIcon:string) :void {
 this.iconName = newIcon;
}

HTML code



<md-icon >{{ iconName }}</md-icon>

<button (click)="changeIcon('error')" >error</button>
<button (click)="changeIcon('warning')">warning</button>
<button (click)="changeIcon('folder')">folder</button>

when this button is pressed, the icons will be changed.

-1


source






More articles:


All Articles