CODEWITHSUNDEEP
javascripthtmlangularsortingangular2-pipe
Kesem David
Kesem David

Reputation: 2235

How to order by closest date to today using Angular2 pipe

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 OrderByUpcomingToLatestPipe look like?

<event-element *ngFor="let event of events | orderByUpcomingToLatest"></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)

Upvotes: 1

Views: 5183

Answers (3)

Kesem David
Kesem David

Reputation: 2235

So here's the working pipe 

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

@Pipe({
  name: "upcomingToLatest"
})
export class UpcomingToLatestPipe 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

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86790

Try using this custom pipe

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

@Pipe({
    name: 'OrderByUpcomingToLatestPipe '
})
export class OrderByUpcomingToLatestPipe 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

Upvotes: 0

Andrei Matracaru
Andrei Matracaru

Reputation: 3671

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 component, 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>

Upvotes: 5

Related Questions