web-dev-qa-db-fra.com

Comment changer dynamiquement le nom de la classe css dans angular 2

J'ai deux noms de classe CSS comme suit

.icon_heart{
     color: #bdbdbd;
}

.icon_heart_red{
    color:#a6b7d4;;
}

Mon HTML a une icône en forme de cœur

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

Ici, j'ai deux balises div, l'icône du cœur est de couleur grise au départ et en cliquant dessus, je la changerai en couleur bleue .

Voici mon code de fichier ts:

  showheartIcon=true;
  showheartIconRed =false;

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

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

J'ai deux icônes de couleur différente.

Question

Au lieu d'avoir deux icônes cardiaques, est-il possible de changer la classe de l'icône?

J'ai vu en JavaScript que nous pouvons le changer w3schools moyen simple d'appliquer la classe à la balise div, mais je suis nouveau sur TypeScript. Comment puis-je changer de classe?

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

ou

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

En plus de la réponse ci-dessus. c'est aussi possible.

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