Skip to content
▼ Angular 5+ orderBy pipe
TypeScript HTML JavaScript CSS
Branch: master
Clone or download
Latest commit e4f0d32 Oct 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
e2e #82 update project Jun 29, 2019
src
.editorconfig #82 update project Jun 29, 2019
.gitignore #82 update project Jun 29, 2019
.travis.yml update node Jun 29, 2019
CHANGELOG.md
LICENSE
README.md Update README.md Oct 22, 2019
SYSTEMJS.md
angular.json fix path Jun 30, 2019
browserslist #82 update project Jun 29, 2019
karma.conf.js #82 update project Jun 29, 2019
package-lock.json fix security issues with dependencies Oct 15, 2019
package.json prepare release Sep 9, 2019
public_api.ts
tsconfig.app.json
tsconfig.json
tsconfig.spec.json #82 update project Jun 29, 2019
tslint.json #82 update project Jun 29, 2019

README.md

Angular 5+ Order Pipe

https://www.npmjs.com/package/ngx-order-pipe https://www.npmjs.com/package/ng2-order-pipe Build Status DeepScan Grade

Order your collection by a field

Demo page

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
{{ 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

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';
}

Deep sorting

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>

Use OrderPipe in the component

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 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)
<li *ngFor="let item of array | orderBy: order : false : true">
  {{ item.name }}
</li>
  • Switching third parameter to false will do case sensitive comparison to order collection:
<li *ngFor="let item of array | orderBy: order : false : false">
  {{ item.name }}
</li>

Donation

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

paypal

License

MIT © Vadym Yatsyuk

You can’t perform that action at this time.