How to achieve the icon change scenario in angular?

Question

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?

Answer 1

Try this one

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