title: How to change the arrows up or down depending on the sorting?
body: <p>I need to change the arrows depending on the sort, like <a href="https://demos.telerik.com/kendo-ui/grid/sorting" rel="nofollow noreferrer">here</a>.</p>
  
  <p>sortingPipe.ts:</p>
  
  <pre><code>import { SprBitType } from '../spr-bit-type/sprBitType'; 
  import { Pipe, PipeTransform } from '@angular/core'; 
  
  @Pipe({
    name: 'sortingSprBitType'
  })
  
  export class SortingSprBitTypePipe implements PipeTransform {
    transform(sprBitTypes: SprBitType[], path: string[], order: number = 1): SprBitType[] {
      // Check if is not null
      if (!sprBitTypes || !path || !order) return sprBitTypes;
      return sprBitTypes.sort((a: SprBitType, b: SprBitType) =&gt; {
        // We go for each property followed by path
        path.forEach(property =&gt; {
          a = a[property];
          b = b[property];
        })
        // Order * (-1): We change our order
        return a &gt; b ? order : order * (- 1);
      })
    }
  }
  </code></pre>
  
  <p>sortingPipe.spec.ts:</p>
  
  <pre><code>import { TestBed, async } from '@angular/core/testing';
  import { SortingSprBitTypePipe } from './sortingSprBitType.pipe';
  
  describe('SortingSprBitTypePipe', () =&gt; {
    it('create an instance', () =&gt; {
      const pipe = new SortingSprBitTypePipe();
      expect(pipe).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>Component.ts:</p>
  
  <pre><code>...
    path: string[] = ['sprBitType'];
    order: number = 1; // 1 asc, -1 desc;
  
  ...
  
    sortTable(prop: string) {
      this.path = prop.split('.')
      this.order = this.order * (-1); // change order
      return false; // do not reload
    }
  
  ...
  </code></pre>
  
  <p>Here is how html can be more properly remade (using these symbols for the ordering of ▲ ▼):</p>
  
  <pre><code>&lt;a class="sorting" (click)="sortTable('name')" &gt;Name⬍&lt;/a&gt;
  &lt;a class="sorting" (click)="sortTable('rn')"&gt; RN⬍&lt;/a&gt;
  </code></pre>