How can I sort my data by name in a *NgFor list?

Question

I am working on a new project on Angular 6.

I have a list of students with a *NgFor :

(html)

<tr *ngFor="let kk of Repdata | filterdata: queryString : 'name' ; let ind = index">

    <td>{{ind + 1}}</td>
    <td>{{kk.name}}</td>
    <td>{{kk.prenom}}</td>

(filterdata is use for a seachbar)

typescript :

GetUser(){
   return this.http.get('http://localhost:8080/api/getUser/')
           .map((response: Response) => response.json())
}

javascript :

app.get("/api/getUser",function(req,res){
    model.find({},function(err,data){
              if(err){
                  res.send(err);
              }
              else{
                  res.send(data);
                  }
          });
  })

In my table, I have my data ordered by id, but I want to order it by name. I don't know how to.

You can accomplish that by creating a custom pipe (in this case, a sort pipe). I would suggest you to take inspiration from this: https://stackoverflow.com/questions/35158817/angular-2-orderby-pipe — briosheje, Sep 11 '18 at 09:41
You can check this for 5+ Angular https://www.npmjs.com/package/ngx-order-pipe — Bhavin, Sep 11 '18 at 09:56

Michel Vorwieger · Answer 1 · 2018-09-11T10:05:50.317

2

if you just want your data sorted by name outside of the Database you can use the sort() function as explained here Sort array by firstname (alphabetically) in Javascript

you could also use the Sort function provided by mongodb as it seems you re using mongoose. https://docs.mongodb.com/manual/reference/method/cursor.sort/

if u want to just sort it in the Angular view you can use a custome sort pipe as explained here: Angular 2 OrderBy Pipe

edit:

You shouldnt use Pipes for Filtering / Sorting as they are very unperformant as stated here: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

edited Sep 11 '18 at 10:05

answered Sep 11 '18 at 09:48

Michel Vorwieger

692
5
14

1

As a sidenote, [dynamic filtering/sorting/grouping pipes are discouraged](https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe). – Sep 11 '18 at 10:01

score 0 · Answer 2 · answered Sep 11 '18 at 10:44

You can perform sorting by installing DataTable in your app. It can also used to perform pagination.

You can install DataTable by running following command in angular 6:

npm i angular-6-datatable --save

For complete guide, go through this below link:

https://www.npmjs.com/package/angular-6-datatable

How can I sort my data by name in a *NgFor list?

2 Answers2