2

could you please tell me how to add filter in angular2.Actually whenever user type anything in input field it should filter the list as in autocomplete ..can we do in angular 2 ?

here is my code http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview

<div>
  <input type='text' #inputD>
     <ul>
      <li *ngFor="#elt of elements | async">{{elt.name}}</li>
    </ul>
</div>

update here is my filter

http://plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview

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

@Pipe({
  name: 'filter'
})
@Injectable()
export class Listfilter {
  transform(items: any[], args: any[]): any {
    return items.filter(item => item.column === args[0]);
  }
}

how to add key up and key down event to fliter list in angular 2

user944513
  • 12,247
  • 49
  • 168
  • 318

1 Answers1

2

You need to add the pipe to the annotation where you want to use it

@Component({

    templateUrl: 'home/home.html',
    providers: [SharedService],
    pipes: [Listfilter]
})

and use it like

<li *ngFor="#elt of elements | async | filter:arg1:arg2">{{elt.name}}</li>

Not tried myself yet though.

The pipe also shouldn't throw on null

export class Listfilter {
  transform(items: any[], args: any[]): any {
    if(!items) {
      return null;
    }
    return items.filter(item => item.name === args[0]);
  }
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567