Greetings everyone! I'm a newcomer to angular 2 and currently trying my hand at creating a custom pipe/filter. However, I've encountered an issue when attempting to inject the pipe I created inside app.ts as shown in the image linked here.
Here is my component code:
import { Component, OnInit ,Pipe, PipeTransform} from '@angular/core';
import { Input, Injectable, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import {Observable} from 'rxjs/Rx'
import {Filter} from '../filter.pipe';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css'],
pipesp[Filter]
})
export class TestComponent implements PipeTransform {
private todos = ['wash dishes', 'Clean the ground','program the site', 'eat'];
constructor() {
}
transform(value: any) {
if (!value) {
return '';
}
}
}
And here's the code for filter.pipe.ts:
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name:'filter'})
export class Filter {
transform(value,args){
if(!args[0]){
return value;
}else if ( value){
return value.filter(item => {
for(let key in item){
if((typeof item[key] === 'string' || item[key] instanceof String) && (item[key].indexOf(args[0]) !==-1)){
return true;
}
}
});
}
}
}
Lastly, let's take a look at test.component.html:
<input type="text" [(ngModel)]="filterText">
<ul>
<li *ngFor="let todo of todos | filter: filterText ">
{{todo}}
</li>
</ul>