0

In Angular2 I have an ngFor and want to orderby 1 field but without building a custom pipe.

Are there any built in ones I could use?

This is my code:

<tr *ngFor="let item of listOfMessages" [ngClass]="{unread: item.hasUnreadMessages}">

I want to order by item.hasUnreadMessages.

But I want the simplest way to do this.

I'm using html5 with angular2 and typescript

My attempt:

  this.listOfMessages = this.listOfMessages.sort((item1:any, item2:any): boolean => this.compareByBool(item1, item2, "hasUnreadMessages"));


  compareByBool = (item1: any, item2: any, fieldName: any): any =>{
      return (item1[fieldName] === item2[fieldName] ? 0 : (item1[fieldName] ? -1 : 1));
  }

If this is true: hasUnreadMessages then item should be at top of array

  • 1
    As you probably noted, angular2 deliberately doesn't have an orderBy pipe (see: angular.io/docs/ts/latest/guide/pipes.html). They recommend you hold a secondary array of sorted elements and display them. Will that work for you? – Meir Nov 6 '16 at 17:51
  • yeh hows best to do that? do you have a lodash example? – AngularM Nov 6 '16 at 17:52
2

You can implement your own sorting and then do

this.sortedItem = this.items.sort((item1, item2): number => compareByNumber(item1, item2, fieldName));

or

this.sortedItems = this.items.sort((item1, item2): number => compareByString(item1, item2, fieldName));

depending on your field type

function compareByNumber(item1, item2, fieldName){
  return item1[fieldName] - item2[fieldName];
}
function compareByString(item1, item2, fieldName){
  return (item1[fieldName] < item2[fieldName] ? -1 : (item1[fieldName] === item2[fieldName] ? 0 : 1));
}

function compareByBool(item1, item2, fieldName){
  return (item1[fieldName] === item2[fieldName] ? 0 : (item1[fieldName] ? -1 : 1));
}
|improve this answer|||||
  • do you have one for compare boolean? – AngularM Nov 6 '16 at 18:04
  • Added to the answer. Though note that sort that has lots of 'equal' values might take longer – Meir Nov 6 '16 at 18:07
  • Can you give an example of the input and output? Also, consider adding a print log in the function and trace it. – Meir Nov 6 '16 at 18:09
  • just updated my question with my attempt using your code – AngularM Nov 6 '16 at 18:11
  • Thx. I need data. What data failed to sort? – Meir Nov 6 '16 at 18:11
1

No, you cannot use a pipe since it's a decision by Angular team. There were too many troubles with performance that everyone blamed on Angular, which was only partially correct. So they made a choice not to include it and do not recommend using custom pipes for it.

More about it in the official docs here. It also explains what you can do instead. Basically write your own ordering method like orderedListOfMessages() and do it in typescript/javascript inside your component.

But remember it will happen very very often, so if you know that underlying data has not changed, you can instead add a new variable orderedListOfMessages and update it once right after the data is updated.

So the first approach is simple, but should be used with caution (only very simple and fast, like 5-20 elements maybe).

The second approach is not too complicated, but required more effort. You can be sure it won't overload page on mouse move though.

This very simple snippet seems to work fine for boolean comparison in js:

boolArray.sort(function(item1, item2){ return item1 ? 0 : 1});
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.