I am working with two CSS classes named as below:
.icon_heart{
color: #bdbdbd;
}
.icon_heart_red{
color: #a6b7d4;;
}
Within my HTML code, I have incorporated a heart icon.
<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>
In this scenario, there are two div elements. Initially, the heart icon appears in grey, but upon user interaction, it switches to blue.
The TypeScript snippet below showcases how two icons with different colors can be managed:
showheartIcon = true;
showheartIconRed = false;
setWishlistTrue(id){
this.showheartIconRed = true;
this.showheartIcon = false;
}
setWishlistFalse(id){
this.showheartIconRed = false;
this.showheartIcon = true;
}
Could we potentially swap out the class of the icon instead of utilizing two separate ones?
Reference articles on JavaScript demonstrate the ability to add a class to any HTML element dynamically.
How could a similar concept be implemented within an Angular framework?