Order your collection by a field
https://vadimdez.github.io/ngx-order-pipe/
or see code example
https://stackblitz.com/edit/ngx-order-pipe
npm install ngx-order-pipe --save
For Angular lower than 5 use version 1.1.3
In case you're using systemjs - see configuration here. Otherwise skip this part.
{{ collection | orderBy: expression : reverse : caseInsensitive : comparator }}| 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 determinate order | |
| reverse (optional) | boolean |
false | Reverse sorting order |
| caseInsensitive (optional) | boolean |
false | Case insensitive compare for sorting |
| comparator (optional) | Function |
Custom comparator function to determine order of value pairs. Example: (a, b) => { return a > b ? 1 : -1; } See how to use comparator |
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 {}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';
}Use dot separated path for deep properties when passing object.
<div>{{ { prop: { list: [3, 2, 1] } } | orderBy: 'prop.list' | json }}</div>Result:
<div>{ prop: { list: [1, 2, 3] } }</div>Import OrderPipe to your component:
import { OrderPipe } from 'ngx-order-pipe';Add OrderPipe to the constructor of your component and you're ready to use it:
constructor(private orderPipe: OrderPipe) {
console.log(this.orderPipe.transform(this.array, this.order)); // both this.array and this.order are from above example AppComponent
}Case insensative flag is the third parameter passed to the pipe. Can be true to make comparison case insensative and false to make comparison case sensative.
By default value is set to false.
- Make case insensative order (Third parameter is
true)
<li *ngFor="let item of array | orderBy: order : false : true">
{{ item.name }}
</li>
- Switching third parameter to
falsewill do case sensative comparison to order collection:
<li *ngFor="let item of array | orderBy: order : false : false">
{{ item.name }}
</li>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent