Trying to create a filter based on user status, with "Active" for online and "Inactive" for offline. However, filtering by string is presenting challenges as typing "active" still shows offline users due to the presence of "inactive" within it. I am looking to assign a false value to 'inactive' and a true value to 'active' to resolve this issue.
Any advice on how to achieve this? I want the filter options to display "Active" and "Inactive" in the datalist, but when selected, it should pass true or false values to the filter function.
Below is the HTML and TypeScript function I have created:
<input type="text" list="status" placeholder="Status" (keyup)="updateFilter($event)" id="stat">
<datalist id="status">
<option>Active</option>
<option>Inactive</option>
</datalist>
updateFilter(event: Event) {
this.filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = this.filterValue.trim().toLowerCase();
console.log(this.dataSource.filter);
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}