title: Ascending and Descending Sort in Angular 4
body: <p>Why is it that sort function is working :</p>
  
  <pre><code>&lt;th (click)="sort('transaction_date')"&gt;Transaction Date &lt;i class="fa" [ngClass]="{'fa-sort': column != 'transaction_date', 'fa-sort-asc': (column == 'transaction_date' &amp;&amp; isDesc), 'fa-sort-desc': (column == 'transaction_date' &amp;&amp; !isDesc) }" aria-hidden="true"&gt; &lt;/i&gt;&lt;/th&gt;
  </code></pre>
  
  <p>WHILE THIS ONE ISN'T WORKING :</p>
  
  <pre><code>&lt;th (click)="sort('user.name')"&gt;User &lt;i class="fa" [ngClass]="{'fa-sort': column != 'user.name', 'fa-sort-asc': (column == 'user.name' &amp;&amp; isDesc), 'fa-sort-desc': (column == 'user.name' &amp;&amp; !isDesc) }" aria-hidden="true"&gt; &lt;/i&gt;&lt;/th&gt;
  </code></pre>
  
  <blockquote>
    <p>html</p>
  </blockquote>
  
  <pre><code> &lt;tr *ngFor="let inner of order.purchase_orders | orderBy: {property: column, direction: direction}"&gt;
          &lt;td&gt;{{ inner.transaction_date | date  }}&lt;/td&gt;
          &lt;td&gt;{{ inner.user.name  }}&lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <blockquote>
    <p>ts</p>
  </blockquote>
  
  <pre><code>sort(property){
      this.isDesc = !this.isDesc; //change the direction    
      this.column = property;
      this.direction = this.isDesc ? 1 : -1;
      console.log(property);
    };
  </code></pre>
  
  <blockquote>
    <p>pipe</p>
  </blockquote>
  
  <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 {
      if(records &amp;&amp; records.length &gt;0 ){
      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>Thanks in advance.</p>