typescript - Custom Pipes in Angular 2 -

i new angular 2 framework. trying create custom filter.

app.component.ts

import {component} 'angular2/core'; import {http_providers} 'angular2/http';  @component({     selector: 'my-app',     providers: [userservice,http_providers],     pipes: [searchpipe],     templateurl : `app/user-template.component.html`,     styles:[`       .mt20 { margin-top: 20px; }       .mt30 { margin-top: 30px; }     `]     })  export class appcomponent {    private users = [];   onclick(searchstr){     console.log("textbox value : ",searchstr.value);   }   constructor(private _userservice : userservice){         this._userservice.getusersdata().subscribe(             data => this.users = data         );   }  } 

html

<div class="row">     <div class="col-md-4 col-md-offset-4 mt20">         <div class="input-group">             <input type="text" class="form-control" #searchstr>             <span class="input-group-btn">                     <button class="btn btn-default" type="button" (click)="onclick(searchstr)">search</button>             </span>         </div>     </div> </div> <hr> <!--       cards        --> <div class="container mt30">     <div class="row">         <div class="col-md-3" *ngfor="#user of users | search : searchstr, #i=index">             <div class="card" style="border: 1px solid black; padding:5px; text-align:center;border-radius:5px;">                 <div class="card-block">                     <h4 class="card-title">{{user.name}}</h4>                     <h6 class="card-title">{{user.email}}</h6>                     <p class="card-text">{{user.company.catchphrase}}</p>                     <a href="#" class="btn btn-primary">learn more</a>                 </div>             </div>             <div *ngif="i == 3 || 6">                 <br/>             </div>          </div>     </div> </div> 

pipe

import {pipe} 'angular2/core';  @pipe ({     name : 'search',     pure: false })  export class searchpipe {     transform (value, args: any[]){         return value.filter(             (item) => { if(value.length > 0){                     for(var i=0; i< value.length; i++){                         if(value[i].name == args[0].value || value[i].email == args[0].value){                             console.log("filtered object :",value[i]);                             return value[i];                         }else{                             return;                         }                     }                 }             });     } } 

here not getting list when page loads. , when search string(name or email), getting total list. don't happening. me.

filter takes function run on each of array's items. has return boolean.

your class should this:

export class searchpipe {   transform (value: any[], args: any[]){     const search = args[0].value;      return value.filter(       (item) => {           if(item.name == search || item.email == search){             console.log("filtered object :", item);             return true           }else{             return false;           }       });   } } 

or in shorter version:

export class searchpipe {   transform (value: any[], args: any[]){     const search = args[0].value;      return value.filter(item =>        (item.name == search || item.email == search)     );   } } 

don't search on empty search strings:

export class searchpipe {   transform (value: any[], args: any[]){     const search = args[0].value;      if (!search) return value;      return value.filter(item =>        (item.name == search || item.email == search)     );   } }