I'm attempting to switch between the sort-amount-asc and sort-amount-desc classes while also including another icon in the initial state, using Angular. I attempted to use a ternary operator within ngClass but am struggling to make it work with the font-awesome icon. Here is the updated code:
sorting: any;
sortClass(sortingField: 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 my current attempt at solving the issue. The sorting behavior remains consistent, so whenever the span is clicked, it will always display sorting_asc initially and then sorting_desc upon clicking again.
Thank you for taking the time to assist me with this matter.