I am currently working on creating a sorting function and pipe for a table. I found guidance on how to do this by following a tutorial at this link, and here is the plunker example. In the example, the table header should be clickable to trigger the sort() function, and my pipe name is prdSort. Additionally, I am using ngx-pagination but I don't believe it is causing any errors.
//snippet from service.ts
productList: AngularFireList < any >;
//end
//component.ts
productList: Product[];
isDesc: boolean = false;
column: string = 'prdName';
records = this.productList;
sort(property) {
this.isDesc = !this.isDesc; //invert the direction
this.column = property;
let direction = this.isDesc ? 1 : -1;
};<!-- table header -->
<th (click)="sort('prdName')">Name</th>
<!--table row--><br>
<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} ">//pipe.ts
transform(records: any, args ? : any): any {
return records.sort(function(a, b) {
if (records !== undefined) {
if (a[args.property] < b[args.property]) {
return -1 * args.direction;
} else if (a[args.property] > b[args.property]) {
return 1 * args.direction;
} else {
return 0;
}
}
return records;
});
};I have also included the pipe file in app.module.ts. Please let me know if you need more code snippets or information.