Is there a way to dynamically change the direction of arrows based on sorting, similar to the example shown here?
sortingPipe.ts:
import { SprBitType } from '../spr-bit-type/sprBitType';
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sortingSprBitType'
})
export class SortingSprBitTypePipe implements PipeTransform {
transform(sprBitTypes: SprBitType[], path: string[], order: number = 1): SprBitType[] {
// Make sure parameters are not null before proceeding
if (!sprBitTypes || !path || !order) return sprBitTypes;
return sprBitTypes.sort((a: SprBitType, b: SprBitType) => {
// Access each property based on the given path
path.forEach(property => {
a = a[property];
b = b[property];
});
// Adjust the order based on specified criteria
return a > b ? order : order * (-1);
});
}
}
sortingPipe.spec.ts:
import { TestBed, async } from '@angular/core/testing';
import { SortingSprBitTypePipe } from './sortingSprBitType.pipe';
describe('SortingSprBitTypePipe', () => {
it('should create an instance', () => {
const pipe = new SortingSprBitTypePipe();
expect(pipe).toBeTruthy();
});
});
Component.ts:
...
path: string[] = ['sprBitType'];
order: number = 1; // 1 for ascending, -1 for descending;
...
sortTable(prop: string) {
this.path = prop.split('.');
this.order = this.order * (-1); // toggle order
return false; // prevent reloading
}
...
To display arrow symbols indicating the sorting direction (▲ ▼), HTML can be updated as follows:
<a class="sorting" (click)="sortTable('name')" >Name⬍</a>
<a class="sorting" (click)="sortTable('rn')"> RN⬍</a>