Angular 5+ Order Pipe

> Order your collection by a field

$3

https://vadimdez.github.io/ngx-order-pipe/

or see code example

https://stackblitz.com/edit/ngx-order-pipe

Install

``
npm install ngx-order-pipe --save
`
For Angular lower than 5 use version 1.1.3

Setup

In case you're using systemjs - see configuration here. Otherwise skip this part.




Usage

##### In HTML template

`html
{{ collection | orderBy: expression : reverse : caseInsensitive : comparator }}
`

$3

| 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

`typescript
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

`typescript
import { Component } from '@angular/core';

@Component({
selector: 'example',
template:

• 
  {{ item.name }}
  

})

export class AppComponent {
array: any[] = [{ name: 'John'} , { name: 'Mary' }, { name: 'Adam' }];
order: string = 'name';
}
`

$3


Use dot separated path for deep properties when passing object.
`html

{{ { prop: { list: [3, 2, 1] } } | orderBy: 'prop.list' | json }}

`
Result:
`html

{ prop: { list: [1, 2, 3] } }

`

$3

Import OrderPipe to your component:
`typescript
import { OrderPipe } from 'ngx-order-pipe';
`
Add OrderPipe to the constructor of your component and you're ready to use it:

`typescript
constructor(private orderPipe: OrderPipe) {
console.log(this.orderPipe.transform(this.array, this.order)); // both this.array and this.order are from above example AppComponent
}
`

$3


Case insensitive flag is the third parameter passed to the pipe. Can be true to make comparison case insensitive and false to make comparison case sensitive.
By default value is set to false.

* Make case insensitive order (Third parameter is true)
`html



{{ item.name }}



`
* Switching third parameter to false will do case sensitive comparison to order collection:
`html

{{ item.name }}

``

Donation

If this project help you reduce time to develop, you can give me a cup of tea :)


License

MIT © Vadym Yatsyuk