I am trying to filter an array of users, but when I click on reset data is not coming back. Please guide me on how can I fix this.
filterUsers(event:any) {
this.users = this.users.filter(user => {
return user.displayName.toLowerCase().includes(event.target.value.toLowerCase());
})
}
Any solution appreciated!
You are assigning the result of the filter to the initial variable. Since you do not provide any other code, I'll provide a simple demo:
this.users = ['some', 'array', 'that', 'has', 'elements'];
const initialValue = ['some', 'array', 'that', 'has', 'elements'];
handleReset() {
this.users = initialValue;
}
After having filtered your array, make sure to bind the 'handleReset' function to the reset button, which will set this.users to the initial value.
Note: .filter() method returns an array with elements that pass the filtering condition. If no elements pass the test, an empty array is returned.
For further documentation, refer to this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#return_value
I found a solution and I created a custom pipe to filter records. This works pretty well
Pipe
@Pipe({
name: 'filterUser'
})
export class FilterUserPipe implements PipeTransform {
transform(value: any, args: string) {
return value.filter((v:any) => {
return v.displayName.toLowerCase().includes(args.toLowerCase())
})
}
}
TS file
filterUsers(event:any) {
this.filterUser = event.target.value;
}
HTML File
<mat-form-field class="search-filter">
<input matInput placeholder="Search Team Members..." (keyup)="filterUsers($event)">
</mat-form-field>
<ng-container *ngFor="let user of users | filterUser:filterUser">
<mat-option [value]="user.uid">{{user.displayName}}</mat-option>
</ng-container>
Thanku all for your suggestions.