Angular 5+ order by pipes enables users to order their collection by field.
order by pipe in angular, angular orderby, angular orderby pipe example, ascending and descending sort in angular
How to make use of it:
Install:
npm install ngx-order-pipe --save
1. Import OrderModule to your module.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app';
import { OrderModule } from 'ngx-order-pipe';
@NgModule({
imports: [BrowserModule, OrderModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
2. And use pipe in your component.
import { Component } from '@angular/core';
@Component({
selector: 'example',
template: `
<ul>
<li *ngFor="let item of array | orderBy: order">
{{ item.name }}
</li>
</ul>
`
})
export class AppComponent {
array: any[] = [{ name: 'John'} , { name: 'Mary' }, { name: 'Adam' }];
order: string = 'name';
}
Read More - Fully-Interactive and Accessible HTML Tables In Pure JavaScript | Datatable.js
Arguments
| Param | Type | Default Value | Details |
|---|---|---|---|
| collection | array or object | The collection or object to sort | |
| expression | string or string array | The key or collection of keys to determine the order | |
| reverse (optional) | boolean | false | Reverse sorting order |
| caseInsensitive (optional) | boolean | false | Case insensitive compared to sorting |
| comparator (optional) | Function | Custom comparator function to determine the order of value pairs. Example: (a, b) => { return a > b ? 1 : -1; } |
Angular 5+ Order By Pipe, ngx-order-pipe Plugin/Github
Check More -
Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library
Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js
See Demo And Download
Official Website(VadimDez): Click Here
This superior jQuery/javascript plugin is developed by VadimDez. For extra advanced usage, please go to the official website.