TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    Angular 5+ Order Pipe

    downloads downloads downloads

    Order your collection by a field

    Demo page

    or see code example


    npm install ngx-order-pipe --save

    For Angular lower than 5 use version 1.1.3


    In case you're using systemjs - see configuration here. Otherwise skip this part.


    In HTML template
    {{ collection | orderBy: expression : reverse : caseInsensitive : comparator }}


    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';
      imports: [BrowserModule, OrderModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    export class AppModule {}

    And use pipe in your component

    import { Component } from '@angular/core';
      selector: 'example',
      template: `
          <li *ngFor="let item of array | orderBy: order">
            {{ }}
    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>


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


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



    MIT © Vadym Yatsyuk


    npm i ngx-order-pipe

    DownloadsWeekly Downloads






    Unpacked Size

    86.8 kB

    Total Files


    Last publish


    • vadimdez