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
– Günter Zöchbauer, Commented Feb 11, 2016 at 9:14
see this plnkr.co/edit/hfhY6EdLVNOLP6d4QsWP?p=preview still want to change — user944513
– user944513, Commented Feb 11, 2016 at 9:20
You don't need @Injectable() when there is already decorators like @Component(), @Directive(), @Pipe(). — Günter Zöchbauer
– Günter Zöchbauer, Commented Feb 11, 2016 at 9:22

Günter Zöchbauer · Accepted Answer · 2016-02-11 09:52:47Z

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

edited Feb 11, 2016 at 9:52

answered Feb 11, 2016 at 9:26

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Günter Zöchbauer Over a year ago

There seems to be something wrong with your plunker links. They don't contain any changes.

Günter Zöchbauer Over a year ago

plnkr.co/edit/ienTN54PdS3bydfDgRGI?p=preview Instead of 'abc' you probably want to link to a model variable that contains the value entered into the input.

Collectives™ on Stack Overflow

how to add filter in angular2?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related