I'm struggling to implement a boolean filter for my search results, separating users with financial debt from those without. I need some guidance on how to achieve this.
Data Filter
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(tenants:Tenant[], searchTerm : string): Tenant[] {
if(!tenants || !searchTerm){
return tenants;
}
return tenants.filter(tenant =>
tenant.name.toLocaleLowerCase().indexOf(searchTerm.toLocaleLowerCase()) !== -1);
}
}
https://i.sstatic.net/QGgvG.png
ngOnInit() {
this.userService.getAllTenants().subscribe((data:Tenant[])=>{
this.lstTenants = data.Tenants;
console.log("Tenants:", this.lstTenants)
})
}
<div class="small-container">
<h1>Tenants</h1>
<button class="add" [routerLink]="['/add']">Add New Tenant</button>
<input type="search" placeholder="Search Tenants" [(ngModel)]="searchTerm" [ngModelOptions]="{standalone: true}">
<form>
<div class="form-group">
<label>
<span>Show Financial Debt Only</span>
<input class="form-control mb-2" type="checkbox" [(ngModel)]="hasFinanacialDebt" [ngModelOptions]="{standalone: true}">
</label>
</div>
<div class="form-group">
<label>
<span>Show Non-Financial Debt Only</span>
<input class="form-control mb-2" type="checkbox" [(ngModel)]="hasntFinanacialDebt" [ngModelOptions]="{standalone: true}">
</label>
</div>
</form>
<tr *ngFor="let tenant of lstTenants | filter : searchTerm">
<td>{{tenant.name}}</td>
<td>{{tenant.phoneNumber}}</td>
<td>{{tenant.address}}</td>
<td>{{tenant.financialDebt}}</td>
</tr>Data Model Interface
export class Tenant {
name:String;
phoneNumber:Number
address:String;
financialDebt:Boolean
}