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/angular-hmfhmx

Install

npm install  ngx-order-pipe --save

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`		The key 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: `
    <div>
      <ul>
        <li *ngFor="let item of array | orderBy: order">
          {{ item.name }}
        </li>
      </ul>
    </div>  
  `
})

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>

datalink747/ngx-order-pipe