Issue
I have implemented a filtering functionality in angular with the snippet below and it worked fine:
export class FilterPipe implements PipeTransform {
transform(prsnl: prsnlFrontStateInterface[], filterText: string) {
if(prsnl.length === 0 || filterText === ''){
return prsnl;
}else{
return prsnl.filter((prsnl) =>
{ return prsnl.firstname.toLowerCase() === filterText.toLowerCase()
})
}
}
}
But the problem is that it display the filtered result only when the typing process is completed and the typed word matches the api value, because I used the "===" operator to make the filter. Now I want it to start filtering even during the typing process, i.e the typing is not completed and the typed word is a data or a portion of existing data, similar to the LIKE operator in SQL or JAVA. Because LIKE is not an operator for typescript to do that, I rather used the indexof() method of javascript to do that like this:
export class FilterPipe implements PipeTransform {
transform(prsnl: prsnlFrontStateInterface[], filterText: string) {
if(prsnl.length === 0 || filterText === ''){
return prsnl;
}else{
return prsnl.filter((prsnl) =>
prsnl.firstname.indexOf(filterText) > -1);
}
}
}
EDITED: Adding Html part
comp
<div class="main">
<div class="input-group">
<input type="text" class="form-control" placeholder="Seach by name" [(ngModel)]="filterText">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
But it doesn't work and I wonder why, since "filterText" is the input text value provided. Can someone please guide me about what is wrong with my usage of indexOf(). Or is there any other mistake that I don't see ? I'm very gratefull for any help to figure out what's going wrong.
Solution
I don't think there is any issue in your code, you can try includes it will work same as 'LIKE'.
export class FilterPipe implements PipeTransform {
transform(prsnl: prsnlFrontStateInterface[], filterText: string) {
if(prsnl.length === 0 || filterText === ''){
return prsnl;
}else{
return prsnl.filter((prsnl) =>
prsnl.firstname.includes(filterText));
}
}
}
Usecasehttps://stackblitz.com/edit/typescript-r54kko?file=index.ts
Edited 1: please tell how you're using FilterPipe.
Edited 2: One thing you are missing is toLowerCase(), both indexOf and includes are case sensitive, they will not match for 'Test' === 'test'.
Here is the final solution,
export class FilterPipe implements PipeTransform {
transform(prsnl: prsnlFrontStateInterface[], filterText: string) {
if(prsnl.length === 0 || filterText === ''){
return prsnl;
}else{
return prsnl.filter((prsnl) =>
prsnl.firstname.toLowerCase().includes(filterText.toLowerCase()));
}
}
}
Answered By - Prashant Singh
