Say I have an Event collection:

export class Event {
  startingTime: Date
}

And I want to display them ordered starting from the closest to TODAY, what would that OrderByUpingToLatestPipe look like?

<event-element *ngFor="let event of events | orderByUpingToLatest"></event-element>

Edit:

I want the array to be arranged in descending order when the date closest to today is the first and the date that is the farthest from today is the last (dates that have already passed will be after the far ordered the same way)

Say I have an Event collection:

export class Event {
  startingTime: Date
}

And I want to display them ordered starting from the closest to TODAY, what would that OrderByUpingToLatestPipe look like?

<event-element *ngFor="let event of events | orderByUpingToLatest"></event-element>

Edit:

I want the array to be arranged in descending order when the date closest to today is the first and the date that is the farthest from today is the last (dates that have already passed will be after the far ordered the same way)

• javascript
• html
• angular
• sorting
• angular2-pipe

Share Improve this question Follow edited Aug 22, 2017 at 17:17 Kesem David asked Aug 22, 2017 at 12:23 Kesem DavidKesem David 2,24533 gold badges2929 silver badges4848 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Don't use pipes for ordering. Snippet from the Pipes documentation:

Appendix: No FilterPipe or OrderByPipe

Angular doesn't provide pipes for filtering or sorting lists. Developers familiar with AngularJS know these as filter and orderBy. There are no equivalents in Angular.

This isn't an oversight. Angular doesn't offer such pipes because they perform poorly and prevent aggressive minification. Both filter and orderBy require parameters that reference object properties. Earlier in this page, you learned that such pipes must be impure and that Angular calls impure pipes in almost every change-detection cycle.

You should sort your events in your service or ponent, possibly using something like Lodash:

import * as _ from 'lodash';

this.sortedEvents = _.sortBy(this.events, e => p.startingTime);

And then in your template:

<event-element *ngFor="let event of sortedEvents"></event-element>

So here's the working pipe

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

@Pipe({
  name: "upingToLatest"
})
export class UpingToLatestPipe implements PipeTransform{
  transform(array: any, fieldName: any): any {
    if (array) {
      let now: Date = new Date();

      array.sort((a: any, b: any) => {
        let date1: Date = new Date(a.object[fieldName]);
        let date2: Date = new Date(b.object[fieldName]);

        // If the first date passed
        if(date1 < now){
          // If the second date passed
          if(date2 < now){
            return 0
          } else {
            return 1
          }
        } else {
          // If the second date passed
          if(date2 < now) {
            return -1
          } else if(date1 < date2) {
            return -1
          } else if(date1 > date2) {
            return 1
          } else {
            return 0;
          }
        }
      });
    }

    return array;
  }
}

A quick explanation for that if tree:

1. If the first date is in the past

   1.1 If the second date is in the past - the order of them does not matter

   1.2 Else, meaning the second is in the future, bring second date higher in the order

2. Else, meaning the first date is in the future

   2.1 If the second date is in the past, bring first date higher in the order

   2.2 Else if the first date is before the second date, meaning first date is closer to now than the second date, bring first date higher in the order

   2.3 Else, meaning the second date is closer to now than the first date, bring the second date higher in the order

Try using this custom pipe

import { Pipe, PipeTransform } from "@angular/core"

@Pipe({
    name: 'OrderByUpingToLatestPipe '
})
export class OrderByUpingToLatestPipe implements PipeTransform {

    transform(value: any, args?: any): any {
        let newVal = value.sort((a: any, b: any) => {
            let date1 = new Date(a.date);
            let date2 = new Date(b.date);

            if (date1 > date2) {
                return 1;
            } else if (date1 < date2) {
                return -1;
            } else {
                return 0;
            }
        });

        return newVal;
    }

}

Working Plunker