CODEWITHSUNDEEP
angularformscheckboxfilter
pokly
pokly

Reputation: 121

Filtering a list using checkboxes in angular 9

I need help. I have a list of vehicles. Each vehicle has a value "type" whether it is a car or a motorcycle. I want to filter this list using checkboxes (Car and Motorcycle). I am not sure what is the best practice here.

filter.component.html

<div class="form-group">
      <form class="form-group" [formGroup]="vehiclesFormGroup">
        <label class="custom-control custom-checkbox" >
          <input type="checkbox" class="custom-control-input" formControlName="car" [(ngModel)]="car"/>
          <span class="custom-control-label">Car</span>
        </label>
        <label class="custom-control custom-checkbox" >
          <input type="checkbox" class="custom-control-input" formControlName="motorcycle" [(ngModel)]="motorcycle"/>
          <span class="custom-control-label">Motorcycle</span>
        </label>
        <button class="btn btn-primary btn-block position-sticky btn-search" type="button" (click)="filterVehicles()">Filter Vehicles</button>
      </form>
    </div>


filter.component.ts

 car: false;
 motorcycle: false;
  vehiclesFormGroup = this.formBuilder.group({
    car: this.car,
    motorcycle: this.motorcycle,
  })

filterVehicles() {
    console.log('car:', this.car)
    console.log('motorcycle:', this.motorcycle)
  }

The console output is "true" if checkbox is checked and undefined if unchecked. I guess I need to filter it by using vehicle.type === 'car' and vehicle.type === 'motorcycle' or something. Do you have any examples?

Upvotes: 0

Views: 582

Answers (2)

cyberbobjr
cyberbobjr

Reputation: 239

First, you should not mix ngModel and formControlName binding for form.

next, you can subscribe to the valueChanges of your form and filter when checkbox were modified :

filteredVehicles = [];
vehiclesFormGroup.valueChanges.subscribe(v => {
let filteredCar = (v.car) ? this.vehicles.filter((vehicle) => vehicle.type === 'car')): [];

let filteredCycle = (v. motorcycle) ? this.vehicles.filter((vehicle) => vehicle.type === 'motorcycle')): [];
this.filteredVehicles = [...filteredCar, ...filteredCycle];
})

But beware this solution is not really elegant, because if in the future you'll have more "type" you 'll have lot of copy/paste/ In this case use a dedicated function for filtering by a array of fields.

And don't forget to unsubscribe on valueChanges...

Upvotes: 1

Minal Shah
Minal Shah

Reputation: 1486

filter()** method to filter out the array of the vehicles based on the checked checkbox.

In the method filterVehicle() use the following code:

filterVehicles() {
    console.log('car:', this.car)
    console.log('motorcycle:', this.motorcycle);
    if(this.car){
    this.vehicles= this.vehicles.filter((vehicle) => vehicle.type === 'car');}
    if(this.motorcycle){
     this.vehicles= this.vehicles.filter((vehicle) => vehicle.type === 'motorcycle');
    }
  }

Or else you can maintain the enum for storing the strings car and motorcycle and use that in the filter block

Upvotes: 1

Related Questions