Filtering a list using checkboxes in angular 9

Question

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?

Here I answered for same solution: stackoverflow.com/a/63217990/8495145 and Blitz link stackblitz.com/edit/angular-form-filtering?file=src/app/… — Eric Aska
– Eric Aska, Commented Aug 11, 2020 at 9:00

Minal Shah · Accepted Answer · 2020-08-11 08:33:42Z

1

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

answered Aug 11, 2020 at 8:33

Minal Shah

1,4861 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cyberbobjr · Accepted Answer · 2020-08-11 13:12:20Z

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...

Collectives™ on Stack Overflow

Filtering a list using checkboxes in angular 9

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related