Search by ngFor date range

Question

I need help from someone, I looked around a lot more I couldn’t find. I have two Datastart and Datafim fields and I need to filter on ngFor to filter the selected dates. Example *ngFor="Let order of Opportunities | dateRange:'forecast':startDate:endDate; Let i=index". I researched and this makes Pipetransform...but I have no idea how to do it.

Answer 1

Hello!

In your case, I would only create a function in the component itself that filters your array, to avoid running the pipe code several times.

filtrarItens(arrayOriginal, startDate, endDate) {
  this.opportunities  = arrayOriginal.filter(item => {
    return this.inRange(item.forecast, startDate, endDate);
  });
}

/**
 * Verifica se a data está entre a data inicial e a data final
 */
inRange(data, startDate, endDate) {
  return startDate <= data && endDate >= data;
}

But for you to stay inside about Pipes, below I gave a little explanation about its use.

---

What is the pipe?

Pipetransform is an Angular mechanism for processing data before displaying it in the DOM. Angular itself has its own Pipes like Datepipe that formats a date for which you are, Uppercasepipe to make letters uppercase, Currencypipe to format coins, etc.

How to use the angled pipe?

The use of a pipe is very simple.

{{ dado | nomePipe : PARAMETRO1 : PARAMETRO2 : PARAMETRO3 }}

The datum is the element you want to format. Then comes this bar ( | ) to inform Angular that a pipe will be applied called nomePipe. And finally, separated by two points, all the necessary parameters are passed to the pipe.

But be very careful to use pipes within *ngFor, because every time Angular detects a change it will run the pipe again, and depending on the complexity it can slow down your application.

Creating a pipe:

You can create your own Pipes. From what I understand you want a function that passes the array of items to filter and 3 more arguments, which are:

1. attribute (forecast) - would be the object attribute with the date to compare
2. startDate - the initial date.
3. endDate - the final date.

You can create a pipe by command ng generate pipe dateRange which will generate a file with the Transform function, it will be executed to treat your data. Below I made an implementation to filter the dates.

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

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

  transform(value: any, atributo: string, startDate: Date, endDate: Date): any {
    if (!value) {return value };
  
    return value.filter(item => {
      return this.inRange(item[atributo], startDate, endDate);
    })
  }

  /**
   * Verifica se a data está entre a data inicial e a data final
   */
  private inRange(data, startDate, endDate) {
    return startDate <= data && endDate >= data;
  }

}

I did an example on stackBlitz of a little project, you can see better how it works.

---

Legal links:

• Transforming Data Using Pipes
• What are Pipes in Angular 6
• Angular 5 - How to use Pipes