Angular 2-Search and Sort by Advancesharp.com

<!DOCTYPE html>
<html>

<head>
  <title>Angular 2 Pipes - Sample</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
 
  <!-- Config Agular 2 and Typescript -->
  <script>
    System.config({
      transpiler: 'typescript',
      typescriptOptions: {
        emitDecoratorMetadata: true
      },
      packages: {
        'app': {
          defaultExtension: 'ts'
        }
      }
    });
    System.import('app/main')
      .then(null, console.error.bind(console));
  </script>

</head>

<!-- Run the application -->

<body>
  <app-category class="container" style="display: block">Loading Sample...</app-category>


</body>

</html>

/* Styles go here */


import {bootstrap}  from 'angular2/platform/browser';
import {CategoryComponent} from './category.component';

bootstrap(CategoryComponent);


import {Component} from 'angular2/core';
import {CategoryPipe} from './category.pipe';
import {OrderrByPipe} from './orderby.pipe';

@Component({
  selector: 'app-category',
  templateUrl: './app/category.component.html',
  pipes: [CategoryPipe, OrderrByPipe]          
})
export class CategoryComponent {

 
  records: Array<any>;
  isDesc: boolean = false;
  column: string = 'CategoryName';
  direction: number;
  constructor() { }
  
  ngOnInit() {
    this.records = [
      { CategoryID: 1,  CategoryName: "Beverages", Description: "Coffees, teas" },
      { CategoryID: 2,  CategoryName: "Condiments", Description: "Sweet and savory sauces" },
      { CategoryID: 3,  CategoryName: "Confections", Description: "Desserts and candies" },
      { CategoryID: 4,  CategoryName: "Cheeses",  Description: "Smetana, Quark and Cheddar Cheese" },
      { CategoryID: 5,  CategoryName: "Grains/Cereals", Description: "Breads, crackers, pasta, and cereal" },
      { CategoryID: 6,  CategoryName: "Beverages", Description: "Beers, and ales" },
      { CategoryID: 7,  CategoryName: "Condiments", Description: "Selishes, spreads, and seasonings" },
      { CategoryID: 8,  CategoryName: "Confections", Description: "Sweet breads" },
      { CategoryID: 9,  CategoryName: "Cheeses",  Description: "Cheese Burger" },
      { CategoryID: 10, CategoryName: "Grains/Cereals", Description: "Breads, crackers, pasta, and cereal" }
     ];
     //this.sort(this.column);
  }
  
  sort(property){
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    this.direction = this.isDesc ? 1 : -1;
  };
}


    import {Pipe, PipeTransform} from 'angular2/core';
 
    @Pipe({name: 'category'})
    export class CategoryPipe implements PipeTransform {
      transform(categories: any, searchText: any): any {
         if(searchText == null) return categories;

        return categories.filter(function(category){
          return category.CategoryName.toLowerCase().indexOf(searchText) > -1;
        })
      }
    }

<h1>Angular 2 Search & Sort</h1>

<div class="form-group">
  <div class="col-md-6">
    <input type="text" [(ngModel)]="searchText" class="form-control" placeholder="Search" />
  </div>
</div>
{{column}} : {{isDesc}}
<div class="col-md-12">
  <table class="table table-responsive table-hover">
    <tr>
      <th class="pointer" (click)="sort('CategoryID')">
        Category ID
        <i class="fa" [ngClass]="{'fa-sort': column != 'CategoryID', 'fa-sort-asc': (column == 'CategoryID' && isDesc), 'fa-sort-desc': (column == 'CategoryID' && !isDesc) }" aria-hidden="true"> </i>
      </th>
      <th class="pointer" (click)="sort('CategoryName')">
        Category
        <i class="fa" [ngClass]="{'fa-sort': column != 'CategoryName', 'fa-sort-asc': (column == 'CategoryName' && isDesc), 'fa-sort-desc': (column == 'CategoryName' && !isDesc) }" aria-hidden="true"> </i>
      </th>
      <th class="pointer" (click)="sort('Description')">
        Description
        <i class="fa" [ngClass]="{'fa-sort': column != 'Description', 'fa-sort-asc': (column == 'Description' && isDesc), 'fa-sort-desc': (column == 'Description' && !isDesc) }" aria-hidden="true"> </i>
      </th>
    </tr>
    <tr *ngFor="#item of records | category: searchText | orderBy: {property: column, direction: direction}">
      <td>{{item.CategoryID}}</td>
      <td>{{item.CategoryName}}</td>
      <td>{{item.Description}}</td>
    </tr>
  </table>
</div>


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

@Pipe({  name: 'orderBy' })
export class OrderrByPipe implements PipeTransform {

  transform(records: Array<any>, args?: any): any {
    
    return records.sort(function(a, b){
          if(a[args.property] < b[args.property]){
            return -1 * args.direction;
          }
          else if( a[args.property] > b[args.property]){
            return 1 * args.direction;
          }
          else{
            return 0;
          }
        });
    };
}