This package has been deprecated

Author message:

WARNING: This project has been renamed to ngx-order-pipe. Install using ngx-order-pipe instead.

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

0.1.5 • Public • Published

Angular2 Order Pipe Build Status

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 or object The collection or object to sort
expression string The key to determinate order
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';
}

Deep sorting

Use comma 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>

License

MIT © Vadym Yatsyuk

Package Sidebar

Install

npm i ng2-order-pipe

Weekly Downloads

1,350

Version

0.1.5

License

MIT

Last publish

Collaborators

  • vadimdez