angularfont-awesomeangular-fontawesome

How to use ngClass with fa-icon element using fort-awesome

I'm using Fort Awesome library to insert icons in my Angular 7 project. Set up is correct because I'm able to see icons on my web pages. Question is how do I use these icons with ngClass in order to change them dynamically in response to the value of a variable? Here's my html code:

<div>
  <a (click)="toggle(filters[0])" data-toggle="collapse" href="#coverageFilters" role="button" aria-expanded="true" aria-controls="coverageFilters"><fa-icon icon="minus"></fa-icon> {{filters[0].name}}</a>
  <div class="collapse show multi-collapse" id="coverageFilters">
    <ul class="filter" *ngFor="let item of filters[0].value"><input type="checkbox"> {{item}}</ul>
  </div>
</div>

toggle function in the anchor tag changes value of filters[0]['collapse'] between true and false, and I'd like to use the value of this variable (filters[0]['collapse']) to dynamically change the icon in the fa-icon element from "minus" to "plus".

Would've used Font Awesome to achieve this except that ngClass doesn't work with Font Awesome element either to do what I'm trying to achieve.

Solution

  • I doesn't directly answer you question but it might be an alternative,

    <fa-icon icon="{{filters[0]['collapse'] ? 'plus' : 'minus' }}"></fa-icon>