@angular/material/sort#Sort TypeScript Examples

sortData(sort: Sort) {
    const data = this.desserts.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedData = data;
      return;
    }

    this.sortedData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'name': return compare(a.name, b.name, isAsc);
        case 'calories': return compare(a.calories, b.calories, isAsc);
        case 'fat': return compare(a.fat, b.fat, isAsc);
        case 'carbs': return compare(a.carbs, b.carbs, isAsc);
        case 'protein': return compare(a.protein, b.protein, isAsc);
        default: return 0;
      }
    });
  }

private _applySortChangesToUrlQueryParams(sortChange: Sort): void {
    const sortingAndPaginationQueryParams = {
      sort_active: sortChange.active,
      sort_direction: sortChange.direction,
    };
    this._router.navigate([], {
      queryParams: sortingAndPaginationQueryParams,
      queryParamsHandling: 'merge'
    });
  }

private listenToStateChangeEvents(): void {
    this.dataSource.sort.sortChange
      .pipe(
        takeUntil(this.unsubscribeAll$)
      )
      .subscribe((sortChange: Sort) => {
        this._applySortChangesToUrlQueryParams(sortChange);
      });

    this.dataSource.paginator.page
      .pipe(
        takeUntil(this.unsubscribeAll$)
      )
      .subscribe((pageChange: PageEvent) => {
        this._applyPageStateChangesToUrlQueryParams(pageChange);
      });
  }

private _applySortChangesToUrlQueryParams(sortChange: Sort): void {

    const sortingAndPaginationQueryParams = {
      sort_active: sortChange.active,
      sort_direction: sortChange.direction,
    };

    this._router.navigate([], { queryParams: sortingAndPaginationQueryParams, queryParamsHandling: 'merge' });
  }

sortData(sort: Sort) {
    const data = this.searchedData.slice();
    if (!sort.active || sort.direction === '') {
      this.searchedData = data;
      return;
    }

    this.searchedData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'symbol':
          return this.compare(a.symbol, b.symbol, isAsc);
        case 'correlation':
          return this.compare(a.methylationCorrelation, b.methylationCorrelation, isAsc);
        default:
          return 0;
      }
    });
  }

public sortData(sort: Sort): void {
    const data = this.genesList.slice();
    if (!sort.active || sort.direction === '') {
      this.genesList = data;
      return;
    }

    this.genesList = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'name':
          return this.compare(a.name, b.name, isAsc);
        default:
          return 0;
      }
    });
  }

sortData(sortParameters: Sort) {
    const keyName = sortParameters.active;
    if (sortParameters.direction === 'asc') {
      this.orders = this.orders.sort((a: Order, b: Order) => a[keyName].localeCompare(b[keyName]));
    } else if (sortParameters.direction === 'desc') {
      this.orders = this.orders.sort((a: Order, b: Order) => b[keyName].localeCompare(a[keyName]));
    } else {
      return this.orders = this.getOrders();
    }
  }

public sortData(sort: Sort) {
    const data = this.championData.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedData = data;
      return;
    }
    this.sortedData = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'name':
          return compare(a.name.toLowerCase(), b.name.toLowerCase(), isAsc);
        case 'purchased':
          return compare(a.purchasedHidden, b.purchasedHidden, isAsc);
        default:
          return 0;
      }
    });
  }

/**
   * Sorting genes list
   */
  public sortBy(sort: Sort): void {
    const unSortedData = this.searchedData.slice();

    if (sort.active !== this.sortEnum.byCriteriaQuantity) {
      if (!sort.active || sort.direction === '') {
        this.searchedData = this.cachedData;
        return;
      }
      this.searchedData = unSortedData.sort((a, b) => {
        const isAsc = sort.direction === 'asc';
        switch (sort.active) {
          case this.sortEnum.byName:
            return this.compare((a.symbol + a.name).toLowerCase(), (b.symbol + b.name).toLowerCase(), isAsc);
          case this.sortEnum.byAge:
            return this.compare(a.familyOrigin?.order, b.familyOrigin?.order, isAsc);
          default:
            return 0;
        }
      });
    } else {
      this.filterService.sortParams = sort;
      this.isLoading = true;
      this.searchedData = [];
      this.filterService
        .getSortedAndFilteredGenes()
        .subscribe((sortedGenes) => {
          this.searchedData = sortedGenes.items;
          this.isLoading = false;
          this.cdRef.markForCheck();
        });
    }
  }

sortTable(sortParameters: Sort) {
    // defining name of data property, to sort by, instead of column name
    sortParameters.active = this.tableColumns.find(column => column.name === sortParameters.active).dataKey;
    this.sort.emit(sortParameters);
  }

public sortParams: Sort;

@Output() sortItem: EventEmitter<Sort> = new EventEmitter<Sort>();

/**
   * Send sort item
   */
  public sortBy(event: Sort) {
    this.sortItem.emit(event);
  }

@Output() sort: EventEmitter<Sort> = new EventEmitter();

sortState: Sort = { active: 'num_repos', direction: 'desc' }

sortState: Sort = { active: 'name', direction: 'desc' }

private listenToStateChangeEvents(): void {
    this.dataSource.sort.sortChange.subscribe((sortChange: Sort) => {
      this._applySortChangesToUrlQueryParams(sortChange);
    });
  }