angular2/4材質のクリックイベントでマテリアルアイコンを変更するにはどうすればいいですか？

Question

私はMD-タブグループ内で次のアイコンがあります。

<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> 

私が代わりに「近い」材料アイコンの、「スター」アイコンに変更するようにしたいです。特定のタブのアイコン上でクリックイベントを介してどのように達成できますか？コンポーネントで

Answer 1

：HTML

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

Answer 2

活字体

let iconName = 'delete'; 

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

HTMLコード

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

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

で

public icon = 'close'; 

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

このボタンをクリックすると、アイコンが変更されます。