Angular 2: text filter on input text change

Question

Angular2, in my component.ts, I grab a list of Video Objects and store in _videos:Video[]

In my html, I display the videos,

<tr *ngFor="#video of _videos">

Now I want to create a search input field in the html to filter the videos. I am trying to use pipe:

import {Pipe,PipeTransform} from 'angular2/core';

@Pipe({
  name: 'textfilter'
})

export class TextFilterPipe implements PipeTransform {
  transform(items: any[], args: any[]): any {
    if(args[1].toString().length === 0)
      return items;
    return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
  }
}

in ts,

private _videoTitleFilter: string ='';

in html,

  <tr>
    <th><input id="videoTitleFilter" placeholder="Filter">{{_videoTitleFilter}}</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr *ngFor="#video of _videos |textfilter:'title':_videoTitleFilter">

It seems the binding is not working. The pipe works for the first time. Is it right to use pipe here? Or I should create a new array _videoList: Video[], listen to the keyup event with throttle to change the _videoList and use it in *ngFor, instead of _videos ?

score 4 · Accepted Answer · edited May 23 '17 at 12:02

4

You could make your pipe not pure:

@Pipe({
  name: 'textfilter',
  pure: false
})
export class TextFilterPipe implements PipeTransform {
  transform(items: any[], args: any[]): any {
    if(args[1].toString().length === 0)
      return items;
    return items.filter(item => item[args[0]].indexOf(args[1]) !== -1);
  }
}

This question could help you:

NgFor doesn't update data with Pipe in Angular2

edited May 23 '17 at 12:02

Community

1
1

answered May 11 '16 at 09:12

Thierry Templier

198,364
44
396
360

Tks Thierry, changed, still no update. I will read through the post. Pls note there is no update on my _videos. It remains unchanged after the http fetch. – Hammer May 11 '16 at 09:17
How do your input is bound to the `_videoTitleFilter` property? – Thierry Templier May 11 '16 at 09:21
1

My bad, I change to ngModel. Tks – Hammer May 12 '16 at 04:26

Angular 2: text filter on input text change

1 Answers1