CODEWITHSUNDEEP
angularjsangularangular2-routing
user944513
user944513

Reputation: 12729

how to add filter in angular2?

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

Upvotes: 2

Views: 268

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657831

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

Upvotes: 2

Related Questions