The Angular team didn't include this feature initially because they wanted Angular 2 to run minified without any issues. The OrderBy functionality relies on reflection, which can be problematic with minification. You can read more about it in Miško Hevery's response.

I took the initiative to create a custom OrderBy pipe that handles both single and multi-dimensional arrays, as well as sorting by multiple columns in the array.

<li *ngFor="let person of people | orderBy : ['-lastName', 'age']">{{person.firstName}} {{person.lastName}}, {{person.age}}</li>

This pipe also accommodates adding new items to the array after the page has rendered while still correctly sorting all elements.

You can find a detailed explanation of the migration process from Angular 1 to Angular 2 in my blog post here.

Feel free to check out the live demo at: and https://plnkr.co/edit/DHLVc0?p=info

UPDATE: Added a new demo link to

UPDATE 2: Updated ngFor syntax for improved clarity.

Design-wise, it is not recommended to use the sortBy pipe as it can lead to significant performance issues in a production-level application. This was a known issue with angular version 1.

Instead of creating a custom sort function, the array should be pre-sorted in the typescript file before being displayed. If there is a need to update the order based on user interactions, such as selecting an option from a dropdown menu, a function can be triggered to call the sort function. It's advisable to extract this sort function into a service for reusability. By applying sorting only when necessary, app performance will greatly benefit.

Check out this straightforward filter pipe designed for arrays of objects containing string attribute values (ES6)

filter-array-pipe.js

import {Pipe} from 'angular2/core';

// # Filter Array of Objects
@Pipe({ name: 'filter' })
export class FilterArrayPipe {
  transform(value, args) {
    if (!args[0]) {
      return value;
    } else if (value) {
      return value.filter(item => {
        for (let key in item) {
          if ((typeof item[key] === 'string' || item[key] instanceof String) && 
              (item[key].indexOf(args[0]) !== -1)) {
            return true;
          }
        }
      });
    }
  }
}

Your component

myobjComponent.js

import {Component} from 'angular2/core';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
import {FilterArrayPipe} from 'filter-array-pipe';

@Component({
  templateUrl: 'myobj.list.html',
  providers: [HTTP_PROVIDERS],
  pipes: [FilterArrayPipe]
})
export class MyObjList {
  static get parameters() {
    return [[Http]];
  }
  constructor(_http) {
    _http.get('/api/myobj')
      .map(res => res.json())
      .subscribe(
        data => this.myobjs = data,
        err => this.logError(err))
      );
  }
  resetQuery(){
    this.query = '';
  }
}

In your template

myobj.list.html

<input type="text" [(ngModel)]="query" placeholder="... filter" > 
<div (click)="resetQuery()"> <span class="icon-cross"></span> </div>
</div>
<ul><li *ngFor="#myobj of myobjs| filter:query">...<li></ul>

A pipe receives data as an input and converts it into a specified output. Integrate the file named orderby.ts into your /app directory.

orderby.ts

//The Pipe class implements the transform method of the PipeTransform interface, which takes an input value and an optional array of parameters and returns the transformed value.

import { Pipe,PipeTransform } from "angular2/core";

//Indicate to Angular that this is a pipe by using the @Pipe decorator imported from the core Angular library.

@Pipe({

  //The @Pipe decorator requires an object with a name property specifying the pipe's name for use in template expressions. It must be a valid JavaScript identifier. Our pipe is named orderby.

  name: "orderby"
})

export class OrderByPipe implements PipeTransform {
  transform(array:Array<any>, args?) {

    if(array) {

      let orderByValue = args[0]
      let byVal = 1

      if(orderByValue.charAt(0) == "!") {

        byVal = -1
        orderByValue = orderByValue.substring(1)
      }
      console.log("byVal",byVal);
      console.log("orderByValue",orderByValue);

      array.sort((a: any, b: any) => {
        if(a[orderByValue] < b[orderByValue]) {
          return -1*byVal;
        } else if (a[orderByValue] > b[orderByValue]) {
          return 1*byVal;
        } else {
          return 0;
        }
      });
      return array;
    }
    
  }
}

In your component file (app.component.ts), import the newly added pipe by using:

import {OrderByPipe} from './orderby';

Then include

*ngFor="#article of articles | orderby:'id'"

in your template to sort articles by id in ascending order or orderby:'!id'" for descending order.

Add parameters to a pipe by appending the pipe name with a colon ( : ) followed by the parameter value

List the pipe in the pipes array within the @Component decorator like so: pipes: [ OrderByPipe ].

app.component.ts

import {Component, OnInit} from 'angular2/core';
import {OrderByPipe} from './orderby';

@Component({
    selector: 'my-app',
    template: `
      <h2>orderby-pipe by N2B</h2>
      <p *ngFor="#article of articles | orderby:'id'">
        Article title : {{article.title}}
      </p>
    `,
    pipes: [ OrderByPipe ]

})
export class AppComponent{
    articles:Array<any>
    ngOnInit(){
        this.articles = [
        {
            id: 1,
            title: "title1"
        },{
            id: 2,
            title: "title2",
        }]  
    }

}

For more information, visit my github page and read this post on my website

If you want to sort an array in Angular, you need to create your own Pipe for this purpose. Here is an example that shows how it can be done:

<li *ngFor="#item of array | arraySort:'-date'">{{item.name}} {{item.date | date:'medium' }}</li>

Check out this Plunker example for a demonstration.

This unique sorting pipe I've created is quite versatile as it can handle number sort, string sort, and date sort with ease.

import { Pipe , PipeTransform  } from "@angular/core";

@Pipe({
  name: 'sortPipe'
 })

export class SortPipe implements PipeTransform {

    transform(array: Array<string>, key: string): Array<string> {

        console.log("Custom sorting pipe activated*******  "+ key);


        if(key === undefined || key == '' ){
            return array;
        }

        var arr = key.split("-");
        var keyString = arr[0];   // represents the column to sort (name, age, or date)
        var sortOrder = arr[1];   // specifies ascending or descending order
        var byVal = 1;


        array.sort((a: any, b: any) => {

            if(keyString === 'date' ){

                let left    = Number(new Date(a[keyString]));
                let right   = Number(new Date(b[keyString]));

                return (sortOrder === "asc") ? right - left : left - right;
            }
            else if(keyString === 'name'){

                if(a[keyString] < b[keyString]) {
                    return (sortOrder === "asc" ) ? -1*byVal : 1*byVal;
                } else if (a[keyString] > b[keyString]) {
                    return (sortOrder === "asc" ) ? 1*byVal : -1*byVal;
                } else {
                    return 0;
                }  
            }
            else if(keyString === 'age'){
                return (sortOrder === "asc") ? a[keyString] - b[keyString] : b[keyString] - a[keyString];
            }

        });

        return array;

  }

}