angular2 sortable list abstract class

sortable-list.abstract.ts

import { ChangeDetectorRef } from '@angular/core';

/**
 * @whatItDoes decorates Component with toggleOrder(property), get list() and get(CSS)Class functions.
 *
 * @howToUse
 * \@Component({
 *   template: `
 *     <table>
 *       <tr>
 *         <th (click)="toggleOrder('id')" [ngClass]="getClass('id')">ID</th>
 *         <th (click)="toggleOrder('name')" [ngClass]="getClass('name')">Name</th>
 *       </tr>
 *       <tr *ngFor="let item of list">
 *         <td>{{item.id}}</td>
 *         <td>{{item.name}}</td>
 *       </tr>
 *     </table>
 *   `,
 *   changeDetection: ChangeDetectionStrategy.OnPush
 * })
 *  export class SortableListComponent extends SortableList<Object> implements OnInit {
 *
 *   constructor(protected cd: ChangeDetectorRef) {
 *     super(cd);
 *   }
 *
 *   ngOnInit() {
 *     this.property = 'id'; // change default / starting sort
 *     this.getDataFunction(); // get Data and store it in this.items
 *   }
 * }
 *
 * @description Abstract Class for List Components.
 * @todo Sould be a Decorator as soon Method injections are supported by Typescript.
 */
export abstract class SortableList<T> {
  public headerSortDown = 'headerSortDown';
  public headerSortUp = 'headerSortUp';
  public property = 'id';
  public ascDesc = 'desc';
  public items: T[];

  constructor(protected cd: ChangeDetectorRef) {
  }

  /**
   * Toggle sort order (asc|desc) of property
   * @param property
   */
  public toggleOrder(property: string): void {
    if (this.property === property) {
      this.ascDesc = this.ascDesc === 'asc' ? 'desc' : 'asc';
    }
    this.property = property;
    this.cd.markForCheck();
  }

  /**
   * Get CSS Class (headerSortDown|headerSortUp) if
   * @param property
   * @return Object
   */
  public getClass(property: string): any {
    const css: any = {};
    if (this.property === property) {
      css[this.headerSortDown] = this.ascDesc === 'asc';
      css[this.headerSortUp] = this.ascDesc !== 'asc';
    }
    return css;
  }

  /**
   * return sorted list
   */
  get list(): T[] {
    return this.orderBy(this.items, this.property, this.ascDesc);
  }

  protected orderBy(list: T[], property, ascDesc): T[] {
    if (list == null || list.length === 0 || !list[0].hasOwnProperty(property)) {
      return;
    }
    return list.sort((a: any, b: any) => {
      const aProp = a[property].toLowerCase();
      const bProp = b[property].toLowerCase();
      if (aProp > bProp) {
        return (ascDesc === 'asc' ? -1 : 1);
      }
      if (aProp < bProp) {
        return (ascDesc === 'asc' ? 1 : -1);
      }
      return 0;
    });
  }
}