Hi I'm building a small stackoverflow-like forum and I'm trying to implement a simple text-filter for my threads-titles.
I've recently started learning about rxjs and pipes so this is what I came up so far with 2 issues
- I'm not sure which method I should use to to parse the title, i'm currently using string.include() but it's not working correctly (e.g. if I type who, then "how" shows, if I type "how" then "who" shows...
UPDATE: Sofar the major error seems to be that the pipe only receives the first letter...but no clue on what causes it.
- I'm using a pure pipe and the property gets passed to it via an subject,not sure if this is the best practice way...
https://plnkr.co/edit/VViLYFd5oFTwNqP9eoZi?p=preview
Thanks for help and suggestions
Component
@Component({
selector: 'dashboard-main',
pipes:[FilterTitle],
template:`
<input type="text" id="title" [(ngModel)]="binding" (keyup)="trigger()">
<h3>{{binding}}</h3>
<hr>
<h3>{{testText}}</h3>
<hr>
<ul>
<li *ngFor="#thread of threadlist | filterTitle:testText">{{thread.title}}</li>
</ul>
`
})
export class DashboardMainComponent implements OnInit{
binding:string='Input';
text$:Subject<string> = new Subject<string>();
testText:string="";
ngOnInit():any {
this.text$.debounceTime(500).distinctUntilChanged().subscribe( text => this.setText(text))
}
trigger(){
this.text$.next(this.binding);
}
setText(text:string){
console.log(text);
this.testText = text;
}
threadlist=[
{
title:'Who are you?'
},
{
title:'How are you?'
},
{
title:'Where are you?'
}
]
}
Pipe
@Pipe({
name:'filterTitle',
})
export class FilterTitle implements PipeTransform{
transform(array:any[], [search]):any {
if(search ===''){
return array
}
return array.filter(thread => {
return thread.title.includes(search)
})
}
}
