0

I am new to angular and have a below code.

<span
    class="fas fa-star"
    [ngClass]="isFavorite"
    class="far fa-star"
    [ngClass]="!isFavorite"
    (click)="onClick()"
></span>

By using the font-awesome icon, when I click the star icon, the icon is changed. However, the code above didn't work when I click the star button. How to achieve my issue by changing the my code without large modification?

sclee1
  • 1,095
  • 1
  • 15
  • 36

1 Answers1

1

Try this one

<span class="fa-star"
    [ngClass]="{'fas': isFavorite, 'far': !isFavorite}"
    (click)="onClick()"></span>
Andrew Kolesnyk
  • 161
  • 6
  • 1
    @sclee1: You can also use `[ngClass]="{isFavorite ? 'fas' : 'far'}"`. Have a look on conditional classes in angular [here](https://stackoverflow.com/a/41974490/3623608). – Tommy Aug 30 '20 at 10:14