Wondering what’s next for npm?Check out our public roadmap! »

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

    2.1.1 • Public • Published

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

    Install

    npm i ngx-order-pipe

    DownloadsWeekly Downloads

    27,321

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    85.6 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar