Issue
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.
Solution
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;
}
Answered By - akkonrad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.