Angular8 Checkbox boolean filter

Question

I'm trying to create a boolean filter for my results, by users who have financial debt and those who haven't, but I got lost and just can't figure out how to do it.

Search Pipe(working with text search)

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(tenants:Tenant[], searchTerm : string): Tenant[] {
    if(!tenants || !searchTerm){
      return tenants;
    }
    return tenants.filter(tenant => 
      tenant.name.toLocaleLowerCase().indexOf(searchTerm.toLocaleLowerCase()) !== -1);
  }
}

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 none 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 | search : searchTerm">
                    <td>{{tenant.name}}</td>
                    <td>{{tenant.phoneNumber}}</td>
                    <td>{{tenant.address}}</td>
                    <td>{{tenant.financialDebt}}</td>
                    </tr>

Interface file

export class Tenant {
    name:String;
    phoneNumber:Number
    address:String;
    financialDebt:Boolean
}

Msk Satheesh · Accepted Answer · 2021-02-11 13:40:28Z

Try Using:

pipe

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "filter"
})
export class FilterPipe implements PipeTransform {
  transform(data: any, key: string, financial: any, non_financial: any): any {
    if (!data || data.length === 0) {
      return [];
    }
    console.log(key,financial,non_financial)

    return data.filter(item => (item[key] == financial || item[key] == non_financial));
  }
}

And your *ngFor need to be like this

*ngFor="let user of lstTenants | filter:'financialDebt':financial:nonFinancial"

app.component.html

<div class="container" style="margin-top: 40px;">
    <input type="checkbox" id="financial" (change)="setFinancial($event)"/>
    <label style="margin-left: 10px;" >Financial Dept Users</label>
    <hr>
    <input type="checkbox" id="not_financial" (change)="setFinancial($event)"/>
    <label style="margin-left: 10px;">Not Financial Dept Users</label>
    <hr>
    <table class="table">
        <thead>
            <tr>
                <th>Address</th>
                <th>Created At</th>
                <th>Financial Debt</th>
            </tr>
        </thead>
        <tr *ngFor="let user of lstTenants | filter:'financialDebt':financial:nonFinancial">
            <td>{{user.address}}</td>
            <td>{{user.createdAt}}</td>
            <td>{{user.financialDebt}}</td>
        </tr>
    </table>
</div>

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  financial = true;
  nonFinancial = false;
  lstTenants = [
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false }
  ];

  setFinancial(evt) {
    if (evt.target.id == "financial") this.nonFinancial = evt.target.checked;
    else this.financial = !evt.target.checked;
  }
}

Here the stackblitz example:

https://stackblitz.com/edit/angular-array-pipes-j23kb1?file=src/app/app.component.html

Hope this helps :)

Thank you, but it is not exactly what I was looking for. I want to show all the users on the page,regardless of their status, and then filter them by 2 checkboxes - true and false

Yannick Beauchamp-H · Accepted Answer · 2021-02-11 04:00:20Z

You currently pass only the searchTerm to your pipe. You could pass multiple parameters or pass an object that contains all your filters.

Example with multiple parameters:

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(tenants:Tenant[], searchTerm: string, hasFinancialDebt: boolean, hasntFinancialDebt: boolean): Tenant[] {
    if(!tenants){
      return tenants;
    }
    return tenants.filter(tenant =>
      (!searchTerm || tenant.name.toLocaleLowerCase().indexOf(searchTerm.toLocaleLowerCase()) !== -1) &&
      (!hasFinancialDebt || tenant.financialDebt) &&
      (!hasntFinancialDebt|| !tenant.financialDebt));
  }
}

<tr *ngFor="let tenant of lstTenants | search:searchTerm:hasFinanacialDebt:hasntFinanacialDebt">
    <td>{{tenant.name}}</td>
    <td>{{tenant.phoneNumber}}</td>
    <td>{{tenant.address}}</td>
    <td>{{tenant.financialDebt}}</td>
</tr>

Collectives™ on Stack Overflow

Angular8 Checkbox boolean filter

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related