ng2-order-pipe

Angular2 Order Pipe

Order your collection by a field

Demo page

https://vadimdez.github.io/ng2-order-pipe/

Install

npm install  ng2-order-pipe --save

Usage

In HTML template

{{ collection | orderBy: expression : reverse }}

Arguments

Param	Type	Details
collection	array	The collection to sort
expression	string	The key to compare
reverse (optional)	boolean	Reverse sorting order

Import Ng2OrderModule to your module

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';

import { Ng2OrderModule } from 'ng2-order-pipe';

@NgModule({
  imports: [BrowserModule, Ng2OrderModule],
  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';
}

License

MIT © Vadym Yatsyuk

Changelog

0.1.4

[#11] - Sort array without expression

<div *ngFor="let i of [3, 2, 1] | orderBy">{{ i }}</div>

Result:

<div>1</div>
<div>2</div>
<div>3</div>