sorting in Angular4 based on header clicked

Question

I am trying to implement sorting on Angular4 , when a header is clicked . I want the whole result set to be sorted on the field clicked. I was able to use something like this in Angular1

 ng-click="sortType = 'empId'; sortReverse = !sortReverse;"

And my ng-repeat was something like this

 ng-repeat="employees in searchresponse|orderBy:sortType:sortReverse"

How can i implement something like this or something different which allows me to sort fields in ascending/descending order when clicked . This is what i have started with Angular4 and stuck currently

<table class="table table-bordered table-fixed  table-striped text-center">
    <tr style=" background-color: #bccbd4 ">
        <td class="tabH1" align="center">
            <a>
                <u>EmpId</u>
            </a>
        </td>
        <td class="tabH1" align="center">
            <a>
                <u>Name</u>
            </a>
        </td>
        <td class="tabH1" align="center">
            <a>
                <u>Mobile-Num</u>
            </a>
        </td>
    </tr>
    <tr *ngFor="let emp of empList">
        <td align="center">{{emp.id}}</td>
        <td align="center">{{emp.name}}</td>
        <td align="center">{{emp.mobile}}</td>
    </tr>
</table>

My sample JSON

this.empList = [
    {
        id: '1',
        name: 'test',
        mobile: '1234567890'
    },
    {
        id: '2',
        name: 'kumar',
        mobile: '9786543210'
    }
];

When id is clicked, i want the whole JSON to be sorted based on the empId .should i create my own Pipe or should i create a function to sort the resultset . Any example on how to proceed is greatly appreciated .

Answer 1

You can use a directive to achieve the same. The advantage of using directive is that you can use it anywhere in you other components as well.

Your html would be something like this

<table>
  <thead>
    <th sortColumn [sortKey]="'id'" [data]="data">ID</th>
    <th sortColumn [sortKey]="'name'" [data]="data">Name</th>
    <th sortColumn [sortKey]="'mobile'" [data]="data">Mobile</th>
  </thead>
  <tbody>
  <tr *ngFor="let item of data">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.mobile}}</td>
  </tr>
  </tbody>
</table>

where sort key is the column on which you want to sort the data, sortColumn is the directive selector and data is you entire array of data.

And your directive would be

@Directive({selector: '[sortColumn]'})

export class SortDirective implements OnInit {
  @Input() data: any[];
  @Input('sortKey') key: any;
  private toggleSort: boolean            = false;

  constructor (private el: ElementRef, private renderer: Renderer) {
  }

  ngOnInit () {
    this.renderer.listen(this.el.nativeElement, 'click', (event) => {
      let parentNode = this.el.nativeElement.parentNode;
      let children   = parentNode.children;

      if (this.data && this.key) {
        let sortedData: any = this.sortArray();
      }
      this.toggleSort = !this.toggleSort;
    })
  }

  sortArray (): Array<any> {
    let tempArray: Array<any> = this.data;
    tempArray.sort((a, b) => {
      let aKey = a[this.key];
        let str1: string = a[this.key].toLowerCase();
        let str2: string = b[this.key].toLowerCase();
        if (this.toggleSort) {
          if (str1 < str2) {
            return -1;
          }
          if (str1 > str2) {
            return 1;
          }
        }
        else {
          if (str1 > str2) {
            return -1;
          }
          if (str1 < str2) {
            return 1;
          }
        }
      return 0;
    });
    return tempArray;
  }
}

You can check the working example here. https://angular-sey5es.stackblitz.io