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
Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library
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'; }
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
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.
Be First to Comment