filter pipe on async array not triggered by ngModel change of filter keyword

Question

I have the following filter pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { Filterable } from './models/filterable.model';

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

transform(value: Filterable[], ...args: string[]): unknown {
  console.log("Filter:", args[0]);
  if(value && args[0] && args[0].length>2){
    return value.filter(item => item.name.toLowerCase().includes(args[0].toLowerCase()));
  }
  return value;
}

}

The pipe is used in the html like this:

<app-card *ngFor="let p of projects | async | filter:filterString" headline="{{p.name}}" subHeadline="{{p.leader}}" content="{{p.description}}"></app-card>

And filterString is bound to ngModel like this:

<input matInput [(ngModel)]="filterString" placeholder="filter">

But the console log is never triggered when I type something into the input. How can I trigger the pipe filtering on keyup/change of the ngModel?

Can you check this answer https://stackoverflow.com/questions/39285550/what-is-impure-pipe-in-angular — Chaitanya, Aug 26 '20 at 11:30

score 0 · Answer 1 · answered Aug 26 '20 at 12:51

0

Ok, seems like I forgot to add:

import { FormsModule } from '@angular/forms'; to app.module

(and then add it to the imports)

I'm surprised I did not get any error before adding this in the console, but now it works perfectly.

answered Aug 26 '20 at 12:51

alloisxp

175
3
16

filter pipe on async array not triggered by ngModel change of filter keyword

1 Answers1