Input search filter not working on angular2 - angular2-pipe

Question

I'm facing with the following error :
EXCEPTION: Error in ./UserComponent class UserComponent - inline template:217:14 caused by: Cannot read property 'toLowerCase' of undefined
It's just a list of users with a search input page.
The template is the following :
<tr *ngFor="let user of users | sUser: TxtSearch">
<td>{{user.userid}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.fullname}}</td>
<td>
<button class="btn btn-warning btn-circle-sm" (click)="showEditUser(i, user._id,user)"><span class="glyphicon glyphicon-edit"></span></button>
</td>
<td>
<button class="btn btn-danger btn-circle-sm" (click)="showRemoveUser(user._id, user.username)"><span class="glyphicon glyphicon-remove"></span></button>
</td>
</tr>
The Search input button is :
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control rounded" placeholder="Search" [(ngModel)]="TxtSearch">
And the pipe is :
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'sUser'
})
export class UserPipe implements PipeTransform {
transform(value: any, args?: any): any {
if(args === undefined || args === '') return value;
return value.filter(function(val){
return val.username.toLowerCase().includes(args.toLowerCase());
});
}
}
And pipe/filter declaration is in the app.module
What's wrong with the toLowerCase() function in the pipe ? do I need to import something else ?
Any idea ?
Thank you
/Koul

Answer 1

Change your tranform function and modify passing value type to 'any [] '. hope it helps
transform(value: any[], args?: any): any {
if(args === undefined || args === '')
return value;
return value.filter(function(val){
return val.username.toLowerCase().includes(args.toLowerCase());
});
}

Answer 2

If you actually read the error you'd know that val.username is undefined. So simply include a check for it before trying to call toLowerCase(). You can also add a safety check for args:
transform(value: any[], args?: any): any[] {
if(args === undefined || args === '') return value;
return value.filter(function(val) {
if (!val.username || !args) return false;
return val.username.toLowerCase().includes(args.toLowerCase());
});
}