title: Angular, TypeError: Cannot read property 'sort' of undefined
body: <p>i'm trying to make a sorting function and pipe for a table by following <a href="http://www.advancesharp.com/blog/1211/angular-2-search-and-sort-with-ngfor-repeater-with-example" rel="nofollow noreferrer">this link</a> and here is the <a href="https://plnkr.co/edit/8JxX7HVnO6pJ5M3nSfZq?p=preview" rel="nofollow noreferrer">plunker</a> of that example. From the example that i'm following the table header should be clickable and do the <code>sort()</code> function. My pipe name is <code>prdSort</code>. I'm also using <a href="https://www.npmjs.com/package/ngx-pagination" rel="nofollow noreferrer"><code>ngx-pagination</code></a> but i don't think that the main cause of this error.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//part of service.ts
  productList: AngularFireList &lt; any &gt; ;
  //end
  
  //component.ts
  productList: Product[];
  
  isDesc: boolean = false;
  column: string = 'prdName';
  records = this.productList
  sort(property) {
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    let direction = this.isDesc ? 1 : -1;
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- table header --&gt;
  &lt;th (click)="sort('prdName')"&gt;Name&lt;/th&gt;
  
  &lt;!--table row--&gt;
  &lt;tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | prdSort: {property: column, direction: direction} "&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//pipe.ts
  
  transform(records: any, args ? : any): any {
  
    return records.sort(function(a, b) {
      if (records !== undefined) {
        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;
        }
      }
      return records;
    });
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>I alse already included the pipe file to <code>app.module.ts</code>. Please let me know if more snippets are needed.</p>