Change ion icon color dynamically on like/dislike

Question

Im having problems changing the color of the icon upon liking or disliking the project. What seems to be my problem on my ngIf? HTML

 <ion-icon *ngIf="!project.likedBy" color="dark" name="heart">
 </ion-icon>

 <ion-icon *ngIf="project.likedBy" color="danger" name="heart">
 </ion-icon>
 <span>{{project.numLikes}}</span>

Answer 1

For dynamically changing color you don't really require to create 2 icons. You can write expression to dynamically change color like shown below.

<ion-icon [color]="project.likedBy ? 'danger' : 'dark'" name="heart">

Also make sure that the likedBy property is a boolean value. Else you might have to adjust the condition to set the color string.

Answer 2

***In Typescript***

if(favourite) {
            x.FavouriteImg = 'danger';
          } else {
            x.FavouriteImg = 'dark';
          }
    enter code here

**In design page**

 <ion-icon [color]="item.FavouriteImg" name="heart" slot="end"></ion-icon>