title: Angular 2 Sort table columns
body: <p>I am trying to sort my columns of my table using Angular 2</p>
  
  <p>the pipe transform code is </p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({  name: 'orderBy' })
  export class OrderByPipe implements PipeTransform {
  
    transform(records: Array&lt;any&gt;, args?: any): any {
  
      return records.sort(function(a, b){
        if(a[args.property] &lt; b[args.property]){
          return -1 * args.direction;
        }
        else if( a[args.property] &gt; b[args.property]){
          return 1 * args.direction;
        }
        else{
          return 0;
        }
      });
    };
  }
  </code></pre>
  
  <p>I have defined a sort function in component.ts file as following as :</p>
  
  <pre><code>  sort(property){
      this.isDesc = !this.isDesc; //change the direction
      this.column = property;
      this.direction = this.isDesc ? 1 : -1;
      //this.sort(this.column);
    };
  </code></pre>
  
  <p><strong>HTML looks like this</strong> </p>
  
  <pre><code> &lt;th class="cell-width-header title" (click)="sort(sellerNo)"&gt;
              Seller No
              &lt;i class="fa" [ngClass]="{'fa-sort': column != 'sellerNo', 'fa-sort-asc': (column == 'sellerNo' &amp;&amp; isDesc), 'fa-sort-desc': (column == 'sellerNo' &amp;&amp; !isDesc) }" aria-hidden="true"&gt; &lt;/i&gt;
            &lt;/th&gt;
  
  
  
  
   &lt;tr *ngFor="let x of selectedData  | orderBy: {property: column, direction: direction}"&gt;
  
  
              &lt;td&gt;{{x.sellerNo}}&lt;/td&gt;
  </code></pre>
  
  <p>but after loading the page, I get following error </p>
  
  <p>zone.js:522 Unhandled Promise rejection: Error in ./FundingRequestComponent class FundingRequestComponent - inline template:208:14 caused by: Cannot read property 'sort' of undefined ; Zone: angular ; Task: Promise.then ; Value: 
      ViewWrappedError {__zone_symbol__error: Error: Error in ./FundingRequestComponent class FundingRequestComponent - inline template:208:14 cau……}
       Error: Error in ./FundingRequestComponent class FundingRequestComponent - inline template:208:14 caused by: Cannot read property 'sort' of undefined
          at ViewWrappedError.ZoneAwareError (<a href="http://localhost:4200/polyfills.bundle.js:6688:33" rel="nofollow noreferrer">http://localhost:4200/polyfills.bundle.js:6688:33</a>)
          at ViewWrappedError.BaseError [as constructor] (<a href="http://localhost:4200/vendor.bundle.js:94913:16" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:94913:16</a>)
          at ViewWrappedError.WrappedError [as constructor] (<a href="http://localhost:4200/vendor.bundle.js:94978:16" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:94978:16</a>)
          at new ViewWrappedError (<a href="http://localhost:4200/vendor.bundle.js:96282:16" rel="nofollow noreferrer">http://localhost:4200/vendor.bundle.js:96282:16</a>)</p>