CODEWITHSUNDEEP
angularjsangularangular2-routing
user944513
user944513

Reputation: 12729

why filter not apply on angular 2?

I am trying to use pipe or filter in Aangular 2. I getting this error:

[email protected]?main=browser:484 Unhandled Promise rejection: Template parse errors:
The pipe 'search' could not be found ("<div>
                <ul>
                 <li [ERROR ->]*ngFor="let tt of todoService.todo| search">
                <row-item [t]='tt'></row-item>
         "): TodoList@2:21 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
The pipe 'search' could not be found ("<div>

Here is my code: http://plnkr.co/edit/WXgdKF2gx9Kpj7eqmDJv?p=preview

todo-search.ts

import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
name:'search'
})

export class TodoSearch  implements PipeTransform{
transform(value){
  return value.filter((i) =>i.title.startsWith('s'));
}
}

I am using filter like this 

<li *ngFor="let tt of todoService.todo| search">

Upvotes: 1

Views: 116

Answers (1)

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

Reputation: 657831

You need to add the pipe to declarations

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent,Todo,TodoList,TodoRow,TodoSearch],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

You should also make your pipe safe for null values:

export class TodoSearch  implements PipeTransform{
  transform(value){
    if(!value) {
      return;
    }
    return value.filter((i) =>i.title.startsWith('s'));
  }
}

Plunker example

Upvotes: 2

Related Questions