CheckBox filter for multiple categories in Angular

In this article, I will show you how to implement a product filter like feature(just like you see on amazon) in Angular.

For Backend, I will be using dotnet core to fetch data. So let’s start

Add service to fetch data in Angular project

Create an Angular project and add a service to it. Here I have named it Product but you can name it anything. We are calling our backend API to fetch data in GetProductData() method.

import { HttpClient } from '@angular/common/http';
import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  BaseUrl: string;

  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.BaseUrl = baseUrl;
  }

  GetProductData() {
    return this.http.get(this.BaseUrl + 'api/Product/GetMobileData');
  }
}

Add Action in your controller to return data

I am using dotnet core as backend. Whichever backend you are using, return data looking like this. If you are using dotnet, add the following action to your controller.

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace CheckboxFilterDemo.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ProductController : ControllerBase
    {
        [HttpGet("GetMobileData")]
        public IActionResult GetMobileData()
        {
            return Ok(new
            {
                Brands = new[]
                            {
                                new {  BrandName = "Samsung", Checked = false },
                                new {  BrandName = "Apple" , Checked = false},
                                new {  BrandName = "Oppo" , Checked = false}
                            },
                OperatingSystems = new[]
                            {
                                new { OSName = "IOS" , Checked = false},
                                new { OSName = "Android" , Checked = false}
                            },
                NetworkTypes = new[]
                            {
                                new { NetworkType = "2G", Checked = false},
                                new { NetworkType = "3G", Checked = false},
                                new { NetworkType = "4G", Checked = false}
                            },
                MobileList = new[]
                            {
                                new { price = 25000, Name = "Samsung galaxy Note",BrandName = "Samsung",OSName = "Android", NetworkType = "4G" },
                                new { price = 30000, Name = "Apple Iphone 6",BrandName = "Apple",OSName = "IOS", NetworkType = "3G" },
                                new { price = 20000, Name = "Oppo Max",BrandName = "Oppo",OSName = "Android", NetworkType = "2G" },
                                new { price = 40000, Name = "Oppo Full",BrandName = "Oppo",OSName = "Android", NetworkType = "3G" },
                                new { price = 50000, Name = "Oppo Switch",BrandName = "Oppo",OSName = "Android", NetworkType = "4G" },
                                new { price = 40000, Name = "Apple Iphone 7",BrandName = "Apple",OSName = "IOS", NetworkType = "4G" },
                                new { price = 35000, Name = "Samsung galaxy s",BrandName = "Samsung",OSName = "Android", NetworkType = "3G" },
                                new { price = 10000, Name = "Samsung galaxy o",BrandName = "Samsung",OSName = "Android", NetworkType = "2G" }
                            }
            });
        }
    }
}

Add properties in your component

Next, create a component and Add the following properties to it. ProductData will hold the data from backend. DisplayProductList will hold the list of products and will be used for filtering and display.

//Categories and product list
  ProductData: any = [];
  // List to filter
  DisplayProductList: any = [];

Add method to get data from service

Add a method to get data from the service in your component class.

ngOnInit() {
    this.GetProductData();
  }

  GetProductData() {
    this.ProductService.GetProductData()
      .subscribe(
        data => {
          this.ProductData = data;
          this.DisplayProductList = this.ProductData.MobileList;
        },
        error => {

        });
  }

HTML for component

Add the following HTML to your component HTML file. Here we are showing the list of products. We are giving filtering options for 3 categories Brands, Operating systems, and Networks. It looks like this

<p>Brands</p>
<div *ngFor="let brand of ProductData.Brands">
  <input type="checkbox" name="BrandList" [value]="brand.BrandName" (change)="OnChange($event)" [(ngModel)]="brand.Checked">{{ brand.BrandName }}
</div>
<br />
<p>Operating systems</p>
<div *ngFor="let os of ProductData.OperatingSystems">
  <input type="checkbox" name="OSList" [value]="os.OSName" (change)="OnChange($event)" [(ngModel)]="os.Checked">{{ os.OSName }}
</div>
<br />
<p>Network Types</p>
<div *ngFor="let network of ProductData.NetworkTypes">
  <input type="checkbox" name="NetworkList" [value]="network.NetworkType" (change)="OnChange($event)" [(ngModel)]="network.Checked">{{ network.NetworkType }}
</div>
<br />
<br />
<div *ngFor="let product of DisplayProductList">
  <label>{{ product.price }}</label> --->
  <label>{{ product.Name }}</label> --->
  <label>{{ product.BrandName }}</label> --->
  <label>{{ product.OSName }}</label> --->
  <label>{{ product.NetworkType }}</label>
</div>

Add Getters to component

Add the following getters in your component. SelectedBrand returns all the brands for which checkbox is selected. Similarly for selectedOS and selectedNetwork. The brand, OS, and network lists will be connected with checkboxes using two-way binding. Their default value will be false.

  get selectedBrand() {
    //Get all the selected brands
    return this.ProductData.Brands.filter(opt => opt.Checked)
  }

  get selectedOS() {
    //Get all the selected Operating systems
    return this.ProductData.OperatingSystems.filter(opt => opt.Checked)
  }

  get selectedNetwork() {
    //Get all the selected networks
    return this.ProductData.NetworkTypes.filter(opt => opt.Checked)
  }

Add main checkbox filter method to the component

Add the following method in your component file. This method will be called every time a checkbox’s state changes.

firstly, we are filtering the display list based on brand, if any brand is selected. If a brand is selected then we are filtering the same filtered brand list for operating system. If no brand is selected then we are filtering original product list for operating system.

Same concept for network. If any brand or OS is selected then we are using the already filtered list for network. Else we are using original product list.

If no checkbox is selected then we are assigning the original product list to our display list.

 //This method will be called whenever a checkbox is selected
  OnChange(event: any) {
    //Emptying current product list
    this.DisplayProductList = [];

    //We are assigning the selected brand products to the product list and if no brand is selected nothing happens
    for (var i = 0; i < this.selectedBrand.length; i++) {
      var lst = this.ProductData.MobileList.filter(x => x.BrandName == this.selectedBrand[i].BrandName);
      for (var j = 0; j < lst.length; j++) {
        this.DisplayProductList.push(lst[j]);
      }
    }

    //We are assigning selected OS product to the product list
    //If any Brand was selected then we are filtering the list which was filtered in brand filtering, else we are filtering the original list
    if (this.selectedBrand.length > 0) {
      if (this.selectedOS.length > 0) {
        var tempProductlst = this.DisplayProductList;
        this.DisplayProductList = [];
        for (var i = 0; i < this.selectedOS.length; i++) {
          //Filtering the same list which was filtered in brand list
          var lst = tempProductlst.filter(x => x.OSName == this.selectedOS[i].OSName);
          for (var j = 0; j < lst.length; j++) {
            this.DisplayProductList.push(lst[j]);
          }
        }
      }
    }
    else {
      for (var i = 0; i < this.selectedOS.length; i++) {
        //filtering the original product list
        var lst = this.ProductData.MobileList.filter(x => x.OSName == this.selectedOS[i].OSName);
        for (var j = 0; j < lst.length; j++) {
          this.DisplayProductList.push(lst[j]);
        }
      }
    }

    //We are assigning selected Network products to the product list
    //If any brand or OS is selected then we are filtering the same list filtered there, else we are filtering from original product list
    if (this.selectedBrand.length > 0 || this.selectedOS.length > 0) {
      if (this.selectedNetwork.length > 0) {
        var tempProductlst = this.DisplayProductList;
        this.DisplayProductList = [];
        for (var i = 0; i < this.selectedNetwork.length; i++) {
          //filtering from the same list filtered in Brand and OS
          var lst = tempProductlst.filter(x => x.NetworkType == this.selectedNetwork[i].NetworkType);
          for (var j = 0; j < lst.length; j++) {
            this.DisplayProductList.push(lst[j]);
          }
        }
      }
    }
    else {
      for (var i = 0; i < this.selectedNetwork.length; i++) {
        //filtering from original product list
        var lst = this.ProductData.MobileList.filter(x => x.NetworkType == this.selectedNetwork[i].NetworkType);
        for (var j = 0; j < lst.length; j++) {
          this.DisplayProductList.push(lst[j]);
        }
      }
    }

    //If no checkbox is selected assign original product list to display product list
    if (this.selectedBrand.length == 0 && this.selectedOS.length == 0 && this.selectedNetwork.length == 0) {
      this.DisplayProductList = this.ProductData.MobileList;
    }
  }

The final component class

The final component class looks like this.

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../product.service';

@Component({
  selector: 'app-multi-checkbox',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  //Categories and product list
  ProductData: any = [];
  // List to filter
  DisplayProductList: any = [];

  constructor(private ProductService: ProductService) {
  }

  ngOnInit() {
    this.GetProductData();
  }

  GetProductData() {
    this.ProductService.GetProductData()
      .subscribe(
        data => {
          this.ProductData = data;
          this.DisplayProductList = this.ProductData.MobileList;
        },
        error => {

        });
  }

  //This method will be called whenever a checkbox is selected
  OnChange(event: any) {
    //Emptying current product list
    this.DisplayProductList = [];

    //We are assigning the selected brand products to the product list and if no brand is selected nothing happens
    for (var i = 0; i < this.selectedBrand.length; i++) {
      var lst = this.ProductData.MobileList.filter(x => x.BrandName == this.selectedBrand[i].BrandName);
      for (var j = 0; j < lst.length; j++) {
        this.DisplayProductList.push(lst[j]);
      }
    }

    //We are assigning selected OS product to the product list
    //If any Brand was selected then we are filtering the list which was filtered in brand filtering, else we are filtering the original list
    if (this.selectedBrand.length > 0) {
      if (this.selectedOS.length > 0) {
        var tempProductlst = this.DisplayProductList;
        this.DisplayProductList = [];
        for (var i = 0; i < this.selectedOS.length; i++) {
          //Filtering the same list which was filtered in brand list
          var lst = tempProductlst.filter(x => x.OSName == this.selectedOS[i].OSName);
          for (var j = 0; j < lst.length; j++) {
            this.DisplayProductList.push(lst[j]);
          }
        }
      }
    }
    else {
      for (var i = 0; i < this.selectedOS.length; i++) {
        //filtering the original product list
        var lst = this.ProductData.MobileList.filter(x => x.OSName == this.selectedOS[i].OSName);
        for (var j = 0; j < lst.length; j++) {
          this.DisplayProductList.push(lst[j]);
        }
      }
    }

    //We are assigning selected Network products to the product list
    //If any brand or OS is selected then we are filtering the same list filtered there, else we are filtering from original product list
    if (this.selectedBrand.length > 0 || this.selectedOS.length > 0) {
      if (this.selectedNetwork.length > 0) {
        var tempProductlst = this.DisplayProductList;
        this.DisplayProductList = [];
        for (var i = 0; i < this.selectedNetwork.length; i++) {
          //filtering from the same list filtered in Brand and OS
          var lst = tempProductlst.filter(x => x.NetworkType == this.selectedNetwork[i].NetworkType);
          for (var j = 0; j < lst.length; j++) {
            this.DisplayProductList.push(lst[j]);
          }
        }
      }
    }
    else {
      for (var i = 0; i < this.selectedNetwork.length; i++) {
        //filtering from original product list
        var lst = this.ProductData.MobileList.filter(x => x.NetworkType == this.selectedNetwork[i].NetworkType);
        for (var j = 0; j < lst.length; j++) {
          this.DisplayProductList.push(lst[j]);
        }
      }
    }

    //If no checkbox is selected assign original product list to display product list
    if (this.selectedBrand.length == 0 && this.selectedOS.length == 0 && this.selectedNetwork.length == 0) {
      this.DisplayProductList = this.ProductData.MobileList;
    }
  }

  get selectedBrand() {
    //Get all the selected brands
    return this.ProductData.Brands.filter(opt => opt.Checked)
  }

  get selectedOS() {
    //Get all the selected Operating systems
    return this.ProductData.OperatingSystems.filter(opt => opt.Checked)
  }

  get selectedNetwork() {
    //Get all the selected networks
    return this.ProductData.NetworkTypes.filter(opt => opt.Checked)
  }
}

Add component path in your routing file

Add path of your component to the routing file.

{ path: 'Product', component: ProductComponent },

In dotnet core, by default, it converts first letter of each property in response to lowercase. To change this behavior, Add the following to your ConfigureServices method in Startup.cs class.

services.AddControllersWithViews().AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = null);

That’s all. The final application looks like this

The code for this tutorial is available on Github at https://github.com/juzer-hakimji/CheckboxFilterDemo

Thank you for reading this article. Have a good day.

Please check out this free cricket auction software for players participating in local sports tournaments and also share with others Thanks.

Share :