Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ngx-order-pipe with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. var ngxOrderPipe = require("ngx-order-pipe")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ngx-order-pipe v2.0.2

Angular order pipe, order collection by a field

Angular 5+ Order Pipe Build Status https://www.npmjs.com/package/ng2-order-pipe https://www.npmjs.com/package/ngx-order-pipe 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

ParamTypeDefault ValueDetails
collectionarray or objectThe collection or object to sort
expressionstring or string arrayThe key or collection of keys to determinate order
reverse (optional)booleanfalseReverse sorting order
caseInsensitive (optional)booleanfalseCase insensitive compare for sorting
comparator (optional)FunctionCustom 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>

License

MIT © Vadym Yatsyuk

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free