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: stackoverflow.com/questions/35158817/angular-2-orderby-pipe — briosheje
– briosheje, Commented Sep 11, 2018 at 9:41
You can check this for 5+ Angular npmjs.com/package/ngx-order-pipe — Bhavin
– Bhavin, Commented Sep 11, 2018 at 9:56

Michel Vorwieger · Accepted Answer · 2018-09-11 10:05:50Z

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, 2018 at 10:05

answered Sep 11, 2018 at 9:48

Michel Vorwieger

7225 silver badges14 bronze badges

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

1 Comment

user4676340 Over a year ago

As a sidenote, dynamic filtering/sorting/grouping pipes are discouraged.

Cryptex Technologies · Accepted Answer · 2018-09-11 10:44:57Z

0

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

answered Sep 11, 2018 at 10:44

Cryptex Technologies

1,1639 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related