{"maintainers":[{"name":"anonymous","email":"vadym.yatsyuk@gmail.com"}],"keywords":["angular","angular2","angular4","angular5","angular6","angular7","order","pipe","sort","filter"],"dist-tags":{"latest":"3.0.0"},"author":{"name":"Vadym Yatsyuk","email":"vadym.yatsyuk@gmail.com"},"description":"Angular order pipe, order collection by a field","readme":"
Angular 5+ Order Pipe
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n\n\n> Order your collection by a field\n\n
\n \n
\n\n### Demo page\n[https://vadimdez.github.io/ngx-order-pipe/](https://vadimdez.github.io/ngx-order-pipe/)\n\nor see code example\n\n[https://stackblitz.com/edit/ngx-order-pipe](https://stackblitz.com/edit/ngx-order-pipe?embed=1&file=app/app.component.ts)\n\n## Install\n\n```\nnpm install ngx-order-pipe --save\n```\n*For Angular lower than 5 use version `1.1.3`*\n\n## Setup\n\nIn case you're using `systemjs` - see configuration [here](https://github.com/VadimDez/ngx-order-pipe/blob/master/SYSTEMJS.md). Otherwise skip this part.\n\n\n## Usage\n\n##### In HTML template\n\n```html\n{{ collection | orderBy: expression : reverse : caseInsensitive : comparator }}\n```\n\n### Arguments\n\n| Param | Type | Default Value | Details |\n| --- | --- | --- | --- |\n| collection | `array` or `object` | | The collection or object to sort |\n| expression | `string` or `string array` | | The key or collection of keys to determinate order |\n| reverse *(optional)* | `boolean`| false | Reverse sorting order |\n| caseInsensitive *(optional)* | `boolean`| false | Case insensitive compare for sorting |\n| 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`](https://github.com/VadimDez/ngx-order-pipe/issues/39) |\n\n \n\nImport `OrderModule` to your module\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AppComponent } from './app';\n\nimport { OrderModule } from 'ngx-order-pipe';\n\n@NgModule({\n imports: [BrowserModule, OrderModule],\n declarations: [AppComponent],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}\n\n```\n\nAnd use pipe in your component\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'example',\n template: `\n
\n
\n {{ item.name }}\n
\n
\n `\n})\n\nexport class AppComponent {\n array: any[] = [{ name: 'John'} , { name: 'Mary' }, { name: 'Adam' }];\n order: string = 'name';\n}\n```\n\n### Deep sorting\nUse dot separated path for deep properties when passing object.\n```html\n
\n```\n\n### Use OrderPipe in the component\nImport `OrderPipe` to your component:\n```typescript\nimport { OrderPipe } from 'ngx-order-pipe';\n```\nAdd `OrderPipe` to the constructor of your component and you're ready to use it:\n\n```typescript\nconstructor(private orderPipe: OrderPipe) {\n console.log(this.orderPipe.transform(this.array, this.order)); // both this.array and this.order are from above example AppComponent\n}\n```\n\n### Case insensitive / Case sensitive\nCase 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.\nBy default value is set to false.\n\n* Make case insensitive order (Third parameter is `true`)\n```html\n
\n {{ item.name }}\n
\n```\n* Switching third parameter to `false` will do case sensitive comparison to order collection:\n```html\n
![\"downloads\"](\"https://img.shields.io/npm/dm/ngx-order-pipe.svg?style=flat\")
\n \n \n \n ![\"downloads\"](\"https://img.shields.io/npm/dm/ng2-order-pipe.svg?style=flat\")
\n \n \n \n ![\"downloads\"](\"https://deepscan.io/api/projects/1752/branches/7519/badge/grade.svg\"){kind=icon}
\n \n\n\n> Order your collection by a field\n\n![](\"https://cloud.githubusercontent.com/assets/3748453/22164327/08764608-df57-11e6-9c90-075aeca26fd6.gif\")
\n