sudharshan3347/ngx-order-pipe

▼ Angular 5+ orderBy pipe

Angular 5+ Order Pipe

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	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.collection, this.order));
}

License

MIT © Vadym Yatsyuk