Even though this topic has been covered before, I have not found any satisfactory solutions. Here is my approach:
play.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { PlayComponent } from './play.component';
@NgModule({
imports: [ BrowserModule, FormsModule, Ng2SearchPipeModule ],
declarations: [ PlayComponent ],
bootstrap: [ PlayComponent ],
providers: [ Ng2SearchPipeModule ]
})
export class PlayModule { }
play.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'play',
templateUrl: './play.component.html',
styleUrls: [ './play.component.scss' ]
})
export class PlayComponent {
name = 'Angular';
items = ["Kyle","Eric","Bailey", "Deborah", "Glenn", "Jaco", "Joni", "Gigi"]
term: string;
}
play.component.html:
<div>
<input type="text" [(ngModel)]="term" >
<div *ngFor = "let item of items | filter:term" >
<p>
{{item}}
</p>
</div>
</div>
Upon checking in Chrome, an error message popped up:
The pipe 'filter' could not be found ("
<div>
<input type="text" [(ngModel)]="term" >
<div *ngFor = "le[ERROR ->]t item of items | filter:term" >
<p>
{{item}}
"): ng:///ReportsModule/playComponent.html@5:25
Error: Template parse errors:
The pipe 'filter' could not be found ("
<div>
<input type="text" [(ngModel)]="term" >
<div *ngFor = "le[ERROR ->]t item of items | filter:term" >
<p>
{{item}}
"): ng:///ReportsModule/PlayComponent.html@5:25
Is there something important that I missed?