Angular2 - Table using *ngFor with paging and sorting - sorting

Question

I am creating a simple html table with *ngFor in Angular 2.
My question is,
Is there an easy way to add sorting and paging to the same table without using any additional third party JavaScript ?
Does angular2 provide any techniques to achieve the same ?

Answer 1

I have been attempting to dynamically build and paginate my table in angular without the use of a 3rd party library. Some considerations around this desire may include some or more of the following:
Number of items per table-page. Do you want user to specify them or hard-corded?
Handling the click events, i.e. First,<>Last
The following code I used to dynamically generate the pages number (P2,...,Pn)
declare a variable (pagenumbers) to hold the page number HTML
pagenumbers = '<li class="page-item disabled clearfix d-none d-md-block"><a class="page-link waves-effect waves-effect">First</a></li><li class="page-item-disabled"><a class="page-link" aria-label="Previous"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></a></li><li class="page-item active"><a class="page-link">1</a></li>';
Calling a service to get list of customers:
async getCustomerOrders(CustomerID: number, customerService: CustomerService) {
await customerService.getCustomerOrders(CustomerID)
.map((res) => res)
.subscribe(
data => {
this.customerOrders = data;
this.tot = this.customerOrders.length;
console.log('Total records: ' + this.tot);
this.workingWithLoop(this.tot / 10);
},
err => console.log(err),
() => console.log(this.customerOrders.length / 10)
);
}
The page numbers:
workingWithLoop(pages: number) {
// let pageNumbers = '';
console.log(this.pagenumbers);
console.log('Total pages: ' + pages);
for (let n = 2; n < pages; n++ ) {
console.log('Value of n: ' + n);
this.pagenumbers += '<li class="page-item"><a class="page-link waves-effect waves-effect">' + n + '</a></li>';
}
// tslint:disable-next-line:max-line-length
this.pagenumbers += ' <!--Arrow right--><li class="page-item"><a class="page-link" aria-label="Next"><span aria-hidden="true">»</span><span class="sr-only">Next</span></a></li><!--First--><li class="page-item clearfix d-none d-md-block"><a class="page-link">Last</a></li>';
}
In my html use the following code at the bottom of the table for the page numbers
<nav class="my-4 pt-2">
<ul class="pagination pagination-circle pg-purple mb-0" [innerHTML]="pagenumbers">
</ul>
</nav>
I am still working on dynamically generating a paginated table paginated table.

Answer 2

Angular does not have built-in way to sort tables. You will either have to do it yourself with wiring the events in the table headers, or use a third party component. PrimeNG does this and much more.
Update:
If you wanted to do this yourself, the equivalent of "filters" (Angular 1) is pipes in Angular 2. Here is good guide: http://voidcanvas.com/angular-2-pipes-filters/