custom pipe for list filtering from two dates in angular 5

Question

I have a custom pipe for list filtering by date and it works without arguments

<tr *ngFor="let account of  accounts | customRangeFilter">

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

  transform(value, arg1?:Date, arg2?:any,) {
    if(!arg1 || !arg2){

    return value;

    }else{
      let startDate = new Date(arg1);
      let endDate = new Date(arg2);
      let a = value.filter(
        m => new Date(m.date) >= startDate && new Date(m.date) <= endDate
      )
      return a;
    }

  }
}

I want it to work with 2 arguments to filter but by placing the arguments I get this error

  <tr *ngFor="let account of  accounts | customRangeFilter :'{{startDate}}':'{{endDate}}'">

        Uncaught Error: Template parse errors:
    Can't bind to '*ngFor' since it isn't a known property of 'tr'. ("
      </thead>
      <tbody>
        <tr [ERROR ->]*ngFor="let account of  accounts | customRangeFilter :'{{startDate}}':'{{endDate}}'">

I know that the variables endDate and startDate work because I get their data if I put it in the html, what is the problem?

Answer 1

Your issue is with the way you put your parameters. Remove the expression brackets from your params and have them be:

<tr *ngFor="let account of accounts | customRangeFilter :'startDate':'endDate'">