8

I am looping through all the posts

<li *ngFor="let post of posts">

When displaying the date for each post I do:

{{post.date | date:'yyyy-MM-dd HH:mm:ss'}}

What I want to do is display all the posts in order of newest first.

I have tried using a pipe like:

<li *ngFor="let post of posts | order-by-pipe">

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
 name: 'order-by-pipe'
})
export class OrderByPipe implements PipeTransform{

 transform(array: Array<string>, args: string): Array<string> {

  if(!array || array === undefined || array.length === 0) return null;

    array.sort((a: any, b: any) => {
      if (a.date < b.date) {
        return -1;
      } else if (a.date > b.date) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }

}

But it does not work. I get the error:

TypeError: Cannot read property 'toUpperCase' of undefined ("
[ERROR ->]*ngFor="let post of posts | order-by-pipe">

Any help would be welcome, thanks

Fred
  • 147
  • 1
  • 1
  • 8
  • 1
    This seems misleading, where is `toUpperCase` being called? Not anywhere in what you've posted. – silentsod Dec 13 '16 at 22:54
  • I know, the error does not give much help, this is why I think maybe the pipe is causing it. without the pipe then I get no error. – Fred Dec 13 '16 at 23:10

2 Answers2

11

When you use order-by-pipe as the selector it is attempting to find the variables order by and pipe and do who knows what with them.

Changing the name: in your pipe to orderByPipe resolves the issue.

That was weird.

Here's a demo of the same code, different name: http://plnkr.co/edit/BXkrPqeMYuJMhkx94i6M?p=preview

silentsod
  • 8,165
  • 42
  • 40
10

The Angular team recommends against using pipes for sorting in Angular 2, and dropped this feature from AngularJS purposely. As detailed on https://angular.io/guide/pipes:

Angular doesn't offer such pipes because they perform poorly and prevent aggressive minification... Filtering and especially sorting are expensive operations. The user experience can degrade severely for even moderate-sized lists when Angular calls these pipe methods many times per second. filter and orderBy have often been abused in AngularJS apps, leading to complaints that Angular itself is slow... The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself.

See a similar discussion at https://stackoverflow.com/a/43092380/3211269

Mickey Segal
  • 841
  • 1
  • 10
  • 21