Angular custom pipe for sorting. It will sort array of number/string/object(nested)/date.

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular custom pipe</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

th {
  cursor: pointer;
}

th, td {
  padding: 5px 15px;
}

### Angular custom pipe for sorting

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

import {HomeAppliances} from './home-appliances.component';
import {OrderByPipe} from './order-by.pipe';
import {DataService} from './data.service';

@Component({
  selector: 'my-app',
  template: `
    <home-appliances></home-appliances>
  `,
})
export class App {
  
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ HomeAppliances, App, OrderByPipe ],
  providers: [DataService],
  bootstrap: [ App ]
})
export class AppModule {}

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Injectable()
export class DataService {
  public homeAppliancesData = [
    {id: 101, item: {name: 'Air Conditioner', price: 35000}, releaseDate: new Date('2010/02/13')},
    {id: 102, item: {name: 'Celling Fan', price: 2500}, releaseDate: new Date('1980/04/10')},
    {id: 103, item: {name: 'Clothes Dryer', price: 15000}, releaseDate: new Date('2005/06/07')},
    {id: 104, item: {name: 'Television', price: 50000}, releaseDate: new Date('1984/09/29')},
    {id: 105, item: {name: 'Refrigerator', price: 20000}, releaseDate: new Date('2002/01/21')},
    {id: 106, item: {name: 'Sewing Machine', price: 1500}, releaseDate: new Date('1968/03/15')},
    {id: 107, item: {name: 'Water Purifier', price: 17000}, releaseDate: new Date('2008/01/24')},
    {id: 108, item: {name: 'Oven', price: 4500}, releaseDate: new Date('2003/04/26')},
    {id: 109, item: {name: 'Stove', price: 9000}, releaseDate: new Date('1987/08/07')},
    {id: 110, item: {name: 'Iron', price: 1800}, releaseDate: new Date('1992/11/02')}
  ];
  
  public homeAppliancesName = ['Air Conditioner','Celling Fan','Clothes Dryer','Television',
        'Refrigerator','Sewing Machine','Water Purifier','Oven','Stove','Iron'];

  public getHomeApplianceData() {
    return Observable.of(this.homeAppliancesData);
  }

  public getHomeApplianceNames() {
    return Observable.of(this.homeAppliancesName);
  }
}

import {Pipe, PipeTransform} from '@angular/core'

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {
  transform(values: number[]|string[]|object[], key?: string, reverse?: boolean) {
    if (!Array.isArray(values) || values.length <= 0) {
      return null;
    }

    return this.sort(values, key, reverse);
  }

  private sort(value: any[], key?: any, reverse?: boolean): any[] {
    const isInside = key && key.indexOf('.') !== -1;

    if (isInside) {
      key = key.split('.');
    }

    const array: any[] = value.sort((a: any, b: any): number => {
      if (!key) {
        return a > b ? 1 : -1;
      }

      if (!isInside) {
        return a[key] > b[key] ? 1 : -1;
      }

      return this.getValue(a, key) > this.getValue(b, key) ? 1 : -1;
    });

    if (reverse) {
      return array.reverse();
    }

    return array;
  }

  private getValue(object: any, key: string[]) {
    for (let i = 0, n = key.length; i < n; ++i) {
      const k = key[i];
      if (!(k in object)) {
        return;
      }

      object = object[k];
    }

    return object;
  }

}

import {Component, OnInit} from '@angular/core'

import {DataService} from './data.service';

@Component({
  selector: 'home-appliances',
  template: `
    <div>
      <b>Home Appliances Detail</b>(Sorting of array of object and column exists in nested object)<br /><br/>
      <table>
        <tr>
          <th (click)="sort('id')">Id</th>
          <th (click)="sort('item.name')">Name</th>
          <th (click)="sort('item.price')">Price</th>
          <th (click)="sort('releaseDate')">Release Date</th>
        </tr>
        <tr *ngFor="let data of homeApplianceData | orderBy:sortingName:isDesc">
          <td>{{data.id}}</td>
          <td>{{data.item.name}}</td>
          <td>{{data.item.price}}</td>
          <td>{{data.releaseDate | date}}</td>
        </tr>
      </table>
    </div>
    <br/><hr><br/>
    <div>
      <b>Home Appliances Name</b>(Sorting of array of string)<br /><br/>
      <table>
        <tr>
          <th (click)="order=!order">Name</th>
        </tr>
        <tr *ngFor="let name of homeApplianceNames | orderBy:'':order">
          <td>{{name}}</td>
        </tr>
      </table>
    </div>
  `
}
export class HomeAppliances implements OnInit {
  homeApplianceData: any;
  homeApplianceNames: string[];
  sortingName: string;
  isDesc: boolean;
  
  constructor(private dataService: DataService) {}
  
  ngOnInit(): void {
    this.dataService.getHomeApplianceData().subscribe(response => this.homeApplianceData = response);
    this.dataService.getHomeApplianceNames().subscribe(response => this.homeApplianceNames = response);
  }
  
  sort(name: string): void {
    if (name && this.sortingName !== name) {
      this.isDesc = false;
    } else {
      this.isDesc = !this.isDesc;
    }
    this.sortingName = name;
  }
}