CODEWITHSUNDEEP
angularfrontend
Shayan Hasan Khan
Shayan Hasan Khan

Reputation: 21

Can't use fontawesome icons properly in component in angular

<i class="fas far"
  [class.fa-star]= "isChecked"
  [class.fa-star]= "!isChecked"
  (click)="onClick()"
></i>

I am building this angular component where it displays solid star icon when it is clicked (isChecked value is true), and empty star when it isn't (isChecked value is false). But, I'm facing this issue as how to use class.fa-star because angular will be confused as to which fa-star to display (solid or hollow star because both have same name but different class of icons).

I tried doing "class. fas fa-star" but its giving me an error.

Upvotes: 1

Views: 319

Answers (2)

Ravikumar
Ravikumar

Reputation: 2205

Not pretty sure what exact issue which you are facing. but if you want to multiple classes at the same time you can use [ngClass] attribute to achieve that like below

<i class="fa-star"
    [ngClass]="{'far class1 class2': isChecked, 'fas class3 class4': !isChecked}"
    (click)="isChecked = !isChecked">
</i>

Upvotes: 0

Stacks Queue
Stacks Queue

Reputation: 1152

<i class="fa" 
    [class.fa-star]="isChecked"
    [class.fa-star-o]="!isChecked"
    (click)="isChecked = !isChecked">
</i>

in your component.ts

isChecked: boolean = false;

here is your working code on stackblitz: here

Upvotes: 2

Related Questions