how to add filter in angular2?

Question

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

Possible duplicate of How can i show only results where card.column value matches column.id in angular2 — Günter Zöchbauer
see this plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview still want to change — user944513
You don't need @Injectable() when there is already decorators like @Component(), @Directive(), @Pipe(). — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-02-11T09:26:45

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]);
  }
}

how to add filter in angular2?

1 Answers