How can i toggle an icon using font awesome & angular?

user_14866204 0
Viewed 30

I'm trying to toggle between sort-amount-asc & sort-amount-desc while having another icon in the initial state, in Angular. I tried to make a ternary in the ngClass but can't find the way to make the ngClass to work in the font-awesome icon. Here is the code:

sorting: any;

  sortClass(sortData: string): string {
    if (this.sortData.field === '' || this.sortData.field !== sortingField) {
      return 'sorting';
    } else if (this.sortData.field === sortingField && this.sortData.order === 'desc') {
      return 'sorting_asc';
    } else if (this.sortData.field === sortingField && this.sortData.order === 'asc') {
      return 'sorting_desc';
    }
  }
<span class="sort-icon-np full-width pull-right" [ngClass]="sortClass('data')" (click)="sortBy('data')"><i class="fa fa-sort" [ngClass]="sorting ? '-amount-asc' : '-amount-desc'"></i></span>

This is what I tried. The sorting has always the same behaviour so whenever the span is clicked it always will return sorting_asc and if it is clicked again, it will sort by desc.

Thank you for your time in advance.

angular typescript css html
1 Answers

with ngclass you pass the object with key as class name and value true/false if class should or should not be visible. Values can be obtained from the component. For exapmle:

<a ngClass="{'active': isActive; 'disabled': isDisabled"> ... </a>

MyComponent {
  isActive: boolean;
  isDisabled: boolean;
}
user_4118060
Related