Как реализовать фильтр нескольких продуктов в боковой панели, как Amazon в angular?

Question

вот так выглядят флажки Я пытаюсь создать сайт электронной коммерции, у меня есть страница, на которой отображаются продукты в зависимости от выбранной категории, и я использую только одну страницу для отображать его, т.е. продукты меняются в зависимости от выбранной категории, и я также хочу иметь боковую панель фильтра с флажками, которые создаются динамически в зависимости от выбранной категории. Я динамически отображал флажки в зависимости от категории, используя mat-checkbox. Теперь я застрял с двумя вещами, здесь пользователь может выбрать любое количество флажков 1) Как узнать, какой флажок выбран и его значение? 2) как отфильтровать товары из списка товаров без попадания на сервер?

HTML код

<div class= "maincontainer">
  <div class="filterContainer">
    <div class="filterMain" *ngFor="let filter of filters">
      <h5>{{filter.name}}</h5>
      <div class="filterSub" *ngFor="let filterItem of filter.content">
        <mat-checkbox >{{filterItem.name}}</mat-checkbox>

      </div>
    </div>
  </div>
<div class="allItemcontainer">
  <h4 class="allitemtitle">{{title}}</h4>
  <div class="allItemsMainGrid">
    <div class="allitemgrid" *ngFor="let item of allItems">
      <div class="allitemscard mx-auto">
        <img [src]="item.imageUrl" class="allitemsimage">
        <h5 class="allitemheader">{{item.name}}</h5>
        <p class="allitemsno">{{item.count}} Tickets</p>
      </div>
    </div>
  </div>

</div>
</div>

машинописный код

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {AllItems} from '../../common/AllItems';
import {HttpClient} from '@angular/common/http';
import {EndPointUrls} from '../../common/EndPointUrls.module';
import {FilterDetails} from '../../common/FilterDetails';
import {FormBuilder,FormArray,FormControl,FormGroup} from '@angular/forms';
import { FilterContent } from 'src/app/common/FilterContent';

@Component({
  selector: 'app-all-items-view',
  templateUrl: './all-items-view.component.html',
  styleUrls: ['./all-items-view.component.css']
})
export class AllItemsViewComponent implements OnInit {

  public allItems:AllItems[];
  public title:string;
  public filters:FilterDetails[];
  constructor(private router:Router,private httpClient:HttpClient) { }

  ngOnInit() {
    //console.log(this.router.url);
    this.allItems = new Array();
    this.filters = new Array();
    this.title = "Movies and Events";
    this.getAllTickets();
  }

  getAllTickets()
  {
    this.httpClient.post<{data:any,message:string,fullError:string}>(new EndPointUrls().ticketsUrl,{city:'hyderabad'}).subscribe((serverResponse)=>{
      //console.log(serverResponse);
      let dateMap = new Map();
      let langMap = new Map();
      let index = 0;
      for(let resData of serverResponse.data)
      {
        let dated = resData.date.split("T");
        if(!dateMap.has(dated[0]))
        {
          dateMap.set(dated[0] ,new FilterContent(index++,dated[0]));
          //this.filterContent.push(new FilterContent(index,dated[0]));
        }
        if(!langMap.has(resData.language))
        {
          langMap.set(resData.language,new FilterContent(index++,resData.language));
          //this.filterContent.push(new FilterContent(index,resData.language));
        }
        this.allItems.push(new AllItems(resData.id,resData.name,resData.nooftics,resData.image));
      }
      this.filters.push(new FilterDetails("Date",Array.from(dateMap.values())));
      this.filters.push(new FilterDetails("Languages",Array.from(langMap.values())));
      //console.log(this.filters[0].content);

    });

  }
}