Filter search pipe implementation

Question

I'm filtering the items using the pipe to filter

My Input filed is in the search.html file and Itemlist in the List.html file

Change in the model is not triggering the pipe transform. Please help. Below is the code snippet.

Search.html

<input placeholder="keyword..." [(ngModel)]="search"/>

List.html

<div *ngFor="let item of items | searchPipe:'name':search ">
  {{item.name}}
</div>

Search.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name : 'searchPipe',
})
export class SearchPipe implements PipeTransform {
  public transform(value, key: string, term: string) {
    return value.filter((item) => {
      if (item.hasOwnProperty(key)) {
        if (term) {
          let regExp = new RegExp('\\b' + term, 'gi');
          return regExp.test(item[key]);
        } else {
          return true;
        }
      } else {
        return false;
      }
    });
  }
}

created small plunk [link](http://plnkr.co/edit/jcvOHHJuqjYWdFmlQZB0?p=preview) and your code seems fine... can you verify the functionality? — chrystian, May 23 '17 at 13:46
You have added the search input field in the same template, this will work. But the search input field should be in a different component and populating of list items in a different component. — Sanjaybxl, May 23 '17 at 17:53
please post a link to your fork, as changes aren't saved if you are not the owner (i think) — chrystian, May 24 '17 at 09:00
here is my plunk [http://plnkr.co/edit/Z0vVKJFRYhNC0NsE9UfN] — Sanjaybxl, May 24 '17 at 09:25

score 2 · Answer 1 · answered May 24 '17 at 10:08

Ok, based on our discussion and plunks i think i have an answer. Basically what you were missing is communication between components

Search component:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-search',
  template: `
    <input placeholder="keyword..." [(ngModel)]="search" (keyup)=onChange()/>
    `
})

export class SearchComponent {
  search: String;
  @Output() onSearchChange = new EventEmitter<Object>();

  onChange($event) {
    this.onSearchChange.emit(this.search);
  }
}

then some parent component (with list)

import { Component } from '@angular/core';
import { SearchComponent }  from './search.component';

@Component({
  selector: 'my-app',
  template: `
   <h1>Search pipe test</h1>
    Search:  <my-search (onSearchChange)="search = $event"></my-search>
    <br/>    
    <br/>
      <div *ngFor="let item of items | searchPipe:'name':search ">
        {{item.name}}
      </div>
    `
})
export class AppComponent {
  search: String;
  items: Array<any> = [
    { id: 1, name: 'aaaaa' },
    { id: 2, name: 'bbbbb' },
    { id: 3, name: 'ccccc' },
    { id: 4, name: 'aabb' },
    { id: 5, name: 'bbcc' },
  ]
}

and finally working plunk: http://plnkr.co/edit/TzNQfDQ8K7d81ST9qKj5?p=preview

Filter search pipe implementation

1 Answers1