web-dev-qa-db-ja.com

angular 2でCSSクラス名を動的に変更する方法

次の2つのCSSクラス名があります

.icon_heart{
     color: #bdbdbd;
}

.icon_heart_red{
    color:#a6b7d4;;
}

HTMLにハートアイコンがあります

<div class="icon_heart" *ngIf="showheartIcon">
    <ion-icon name="heart" (click)="setWishlistTrue(category.product_id);" class="heart"></ion-icon>
</div>
<div class="icon_heart_red" *ngIf="showheartIconRed">
    <ion-icon name="heart" (click)="setWishlistFalse(category.product_id);" class="heart"></ion-icon>
</div>

ここには2つのdivタグがあり、ハートアイコンは最初は灰色の色であり、クリックすると青色に変更します。

ここに私のtsファイルのコードがあります：

  showheartIcon=true;
  showheartIconRed =false;

  setWishlistTrue(id){
    this.showheartIconRed = true;
    this.showheartIcon = false;
  }

  setWishlistFalse(id){
    this.showheartIconRed = false;
    this.showheartIcon = true;
  }

色の異なる2つのアイコンがあります。

質問

2つのハートアイコンを使用する代わりに、アイコンのクラスを変更できますか？

JavaScriptで変更できることを確認しました w3schools divタグにクラスを適用する簡単な方法ですが、TypeScriptは初めてです。クラスを変更するにはどうすればよいですか？

htmlcssangularionic2
12
Mohan Gopi
<div 
    [class.icon_heart]="!showheartIconRead"
    [class.icon_heart_red]="showheartIconRead">

または

<div [ngClass]="showheartIconRead ? 'icon_heart_red' : 'icon_heart'">
17
Günter Zöchbauer

上記の答えに加えて。これも可能です。

<div class="{{showheartIconRead ? 'icon_heart_red' : 'icon_heart' }}">
3
Sanju M