how to implement multi product filter in sidebar like amazon in angular?

I am trying to develop an e-commerce website in that I have a page which displays the products depending upon the chosen category and I'm using only one page to display it i.e products changes depending upon the category selected and I also want to have a filter sidebar with checkboxes which are dynamically created depending upon the category selected. I have dynamically displayed the checkboxes depending upon the category using mat-checkbox now I am stuck with two things here user can select any number of checkboxes 1) how to know which checkbox is selected and its value? 2) how to filter the products from the list of products without hitting the server?

HTML code

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

      </div>
    </div>
  </div>
<div class="allItemcontainer">
  <h4 class="allitemtitle"></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"></h5>
        <p class="allitemsno"> Tickets</p>
      </div>
    </div>
  </div>

</div>
</div>

typescript code

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);

    });

  }
}