Sort a list component in Angular

Question

I'm trying to sort my list-component that I've created with angular material.

<div style="width:30%;">
        <mat-nav-list matSort (matSortChange)="sortData($event)">
            <th mat-sort-header="stuff.name">Name</th>
            <mat-list-item *ngFor="let stuff of vehicleDetails">
                <button matLine (click)="updateInfo(stuff.id)"> {{ stuff.name }} </button>
                <button mat-icon-button id="btn" *ngIf='check(stuff.alarm)' matTooltip="{{stuff.alarm[tooltipIndex(stuff)]?.timestamp}} - {{stuff.alarm[tooltipIndex(stuff)]?.description}}">
                    <mat-icon>info</mat-icon>
                </button>
            </mat-list-item>
        </mat-nav-list>
    </div>

The data displayed in the list is a bunch of vehicle names. It comes from my vehicleDetails which is an array of type VehicleDetail, containing properties such as name, id, etc. Right now I'm trying to sort by name. Im using the following functions when trying to achieve this functionality:

 export class VehiclelistComponent implements OnInit, AfterViewChecked
 {

vehicleDetails: VehicleDetail[] = [];
sortedVehicleDetails: VehicleDetail[];

sortData(sort: Sort) {
    const data = this.vehicleDetails.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedVehicleDetails = data;
      return;
    }
    this.sortedVehicleDetails = 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;
      }
    });
  }

  compare(a, b, isAsc) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  }

My ngOnInit and ngAfterViewChecked looks like this

ngOnInit() {
    // Init vehicles
    this.getVehicleDetails();

   }

  ngAfterViewChecked() {
    this.sortedVehicleDetails = this.vehicleDetails.slice();
  }

How can I solve my problem so I can sort by name or any other properties?

cyberpirate92 · Accepted Answer · 2018-07-05 18:46:39Z

2

You need to also get the property by which the object array needs to be sorted.

Something like this

  sort(value: any[], criteria: SortCriteria): any[] {        
    if (!value || !criteria)
      return value;

    let p: string = criteria.property;

    let sortFn:(a: any, b: any) => any = (a, b) => {
      let value: number = 0;
      if (a[p] === undefined) value = -1;
      else if (b[p] === undefined) value = 1;
      else value = a[p] > b[p] ? 1 : (b[p] > a[p] ? -1 : 0);
      return criteria.descending ? (value * -1) : value;
    };

    value.sort(sortFn);
    return value;
  }

Where SortCriteria is,

interface SortCriteria {
  property: string;
  descending?: boolean;
}

You can also create a pipe so that you can use it directly in a template

Stackblitz

edited Jul 5, 2018 at 18:46

answered Jul 5, 2018 at 10:27

cyberpirate92

3,1865 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sort a list component in Angular

1 Answer 1

Stackblitz

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related