https://github.com/vadimdez/ngx-order-pipe
▼ Angular 5+ orderBy pipe
https://github.com/vadimdez/ngx-order-pipe
angular4 angular5 order pipe
Last synced: about 1 year ago
JSON representation
▼ Angular 5+ orderBy pipe
- Host: GitHub
- URL: https://github.com/vadimdez/ngx-order-pipe
- Owner: VadimDez
- License: mit
- Created: 2017-01-19T12:12:48.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T09:58:11.000Z (almost 2 years ago)
- Last Synced: 2025-05-14T14:38:45.683Z (about 1 year ago)
- Topics: angular4, angular5, order, pipe
- Language: TypeScript
- Homepage: https://vadimdez.github.io/ngx-order-pipe/
- Size: 4.87 MB
- Stars: 239
- Watchers: 10
- Forks: 57
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Angular 5+ Order Pipe
> Order your collection by a field
### Demo page
[https://vadimdez.github.io/ngx-order-pipe/](https://vadimdez.github.io/ngx-order-pipe/)
or see code example
[https://stackblitz.com/edit/ngx-order-pipe](https://stackblitz.com/edit/ngx-order-pipe?embed=1&file=app/app.component.ts)
## 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](https://github.com/VadimDez/ngx-order-pipe/blob/master/SYSTEMJS.md). Otherwise skip this part.
## Usage
##### In HTML template
```html
{{ collection | orderBy: expression : reverse : caseInsensitive : comparator }}
```
### 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 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`](https://github.com/VadimDez/ngx-order-pipe/issues/39) |
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';
}
```
### Deep sorting
Use dot separated path for deep properties when passing object.
```html
```
Result:
```html
```
### Use OrderPipe in the component
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
}
```
### Case insensitive / Case sensitive
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 :)
[](https://www.paypal.me/vadimdez)
## License
[MIT](https://tldrlegal.com/license/mit-license) © [Vadym Yatsyuk](https://github.com/vadimdez)