我有两个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>

有两个div元素。心形图标是灰色的，直到用户点击它，然后它应该变成蓝色。
下面的代码块来自我的TypeScript文件;两个不同颜色的图标。

showheartIcon = true;
  showheartIconRed = false;

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

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

是否可以替换图标的类，而不是使用两个图标？

我在JavaScript中看到，我可以向任何HTML元素添加类。
我如何在Angular中实现这一点？