I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial.
The NgbdSortableHeader directive plays a key role in changing the sorting of columns:
@Directive({
selector: 'th[sortable]',
host: {
'[class.asc]': 'direction === "asc"',
'[class.desc]': 'direction === "desc"',
'(click)': 'rotate()'
}
})
export class NgbdSortableHeader {
@Input() sortable: string = '';
@Input() direction: SortDirection = '';
@Output() sort = new EventEmitter<SortEvent>();
rotate() {
this.direction = rotate[this.direction];
this.sort.emit({column: this.sortable, direction: this.direction});
}
}
In addition, here is the component containing the table:
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss'],
providers: [UserService]
})
export class UsersComponent implements OnInit {
faSort = faSort;
faSortUp = faSortUp;
faSortDown = faSortDown;
users$: Observable<User[]>;
total$: Observable<number>;
@ViewChildren(NgbdSortableHeader) headers!: QueryList<NgbdSortableHeader>;
constructor() {
}
ngOnInit(): void {
}
onSort({column, direction}: SortEvent) {
// reset other headers
this.headers.forEach(header => {
if (header.sortable !== column) {
header.direction = '';
}
});
this.service.sortColumn = column;
this.service.sortDirection = direction;
}
}
I am curious about ways to retrieve the current column sorting order and dynamically change or hide the associated icons.
<th scope="col" sortable="firstName" (sort)="onSort($event)">
Name
<fa-icon [icon]="faSort"></fa-icon>
<fa-icon [icon]="faSortUp"></fa-icon>
<fa-icon [icon]="faSortDown"></fa-icon>
</th>