how sort array with object by property use ngFor

Question

I neet to display in table sort data

js

let array = [
  { idx: number, name: string, btn: number, index: number },
  { idx: number, name: string, btn: number, index: number },
  { idx: number, name: string, btn: number, index: number }
]

html

<tr *ngFor="let ticket of array">
  <td>{{ ticket.name }}</td>
  <td>{{ ticket.btn }}</td>
  <td>{{ ticket.index }}</td>
<tr>

I need sort display by index value

[Documentation](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort) — , May 14 '19 at 08:20
You can create a pipe for sorting here is the link https://stackoverflow.com/questions/32882013/angular-2-sort-and-filter — Yash Rami, May 14 '19 at 08:20
it's better to sort in the component each time you get the data. you can as well write the sort pipe, but that's not something that is recommended by Angular team. (they haven't created it in the framework). https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe — Vitalii Chmovzh, May 14 '19 at 08:22
For that you have to create your own custom pipe. For further information, please refer [this discussion](https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe) and [Custom pipes](https://angular.io/guide/pipes#custom-pipes) — Angela Amarapala, May 14 '19 at 08:23

score 17 · Accepted Answer · answered May 14 '19 at 08:22

let array = [
  { idx: 1, name: 'a', btn: 1, index: 2 },
  { idx: 2, name: 'b', btn: 2, index: 3 },
  { idx: 3, name: 'c', btn: 3, index: 1 }
];

// descending
let newarr = array.sort((a, b) => b.index - a.index);

//ascending
let newarr = array.sort((a, b) => a.index - b.index);

console.log(newarr);

score 5 · Answer 2 · answered Jun 08 '22 at 19:52

Create a custom Angular pipe:

Assumption: Suppose you have an array of objects with a field called 'order':

let items = [
   {name: 'item1', order: 2},
   {name: 'item2', order: 1}
];

First: Generate a pipe in terminal:

ng g p sortByOrder

Second: Modify the generated code:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'sortByOrder'
})
export class SortByOrderPipe implements PipeTransform {

  transform(value: any[]): any[] {
    return value.sort((n1,n2) => 
    {
      return n1.order - n2.order; 
    });
  }
}

Third: Use in html:

<div *ngFor="let item of items | sortByOrder" >
</div>

Shadi, I tried this solution with a date attribute. So I switched order with date. Didn't work. Is there something wrong with your SortByOrderPipe function? I think so — Yannick Mussche, Aug 30 '22 at 16:13

score 3 · Answer 3 · answered May 14 '19 at 08:27

3

Here is OrderBy pipe library is available.
https://github.com/VadimDez/ngx-order-pipe

 npm install ngx-order-pipe --save

answered May 14 '19 at 08:27

Ravi Rajput

539
4
12

score 3 · Answer 4 · answered May 14 '19 at 08:37

3

you should use a pipe to sort the data before the show in view:

<tr *ngFor="let ticket of array|sort-pipe">
   <td>{{ticket.name}}</td>
   <td>{{ticket.btn}}</td>
   <td>{{ticket.index}}</td>
<tr>

in sort pipe, you can use :

 array.sort(function(obj1, obj2) {
   return obj1.idx > obj2.idx;
});

answered May 14 '19 at 08:37

Mohammadreza Imani

430
5
13

1

Anyone thinking of doing it this way should be aware that angular does NOT provide a sort pipe out-of-the-box for performance and magnification reasons - https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe – scraymer Apr 11 '20 at 23:18

score 0 · Answer 5 · answered May 14 '19 at 08:24

You can just use sorting arrays:

function sortFunc(a, b) {
  if ( a.index < b.index ){
    return -1;
  }
  if ( a.index > b.index ){
    return 1;
  }
  return 0;
}

let array = [
  {idx: number, name: string, btn: number, index: number},
  {idx: number, name: string, btn: number, index: number},
  {idx: number, name: string, btn: number, index: number}
].sort(sortFunc);

Or you can use lodash orderBy https://lodash.com/docs/4.17.11#orderBy

how sort array with object by property use ngFor

5 Answers5

Linked