I want to make checkbox filter in angular

Here I am sharing the output window of my project

enter image description here

As you can see I have a checkboxes on left hand side and cards on right hand side, all I want it when I check the checkboxes its should show me the check element and rest of the element should hidden Like When I check RICE its should show me the results of RICE related data only.

Here Is the code :

1.crop.model.ts

export class Crop {
    name: string;
    district: string
    subCategory: Subcategory[];
}

export class Subcategory {
    id: number;
    name: string;
   
}

export class CropFilter {
    name: string
    checked: boolean
}

export class DistrictFilter {
    name: string
    checked: boolean
}

2. CropFilter.ts

import { CropFilter } from "./crop.model";


export const CROPSFILTER: CropFilter[] = [
    {
        name: "Rice",
        checked: false
    }, {
        name: "Wheat",
        checked: false
    }, {
        name: "Barley",
        checked: false
    }
]

3. crop.data.ts

import { Crop } from "./crop.model";

export const CROPS: Crop[] = [
    {
        name: "Rice",
        district: "Thane",
        subCategory: [
            {
                id: 1,
                name: "Basmati",
                
            },
            {
                id: 2,
                name: "Ammamore",
                
            }
        ]
    },
    {
        name: "Rice",
       
        district: "Nashik",
        subCategory: [
            {
                id: 1,
                name: "Basmati",
               
            },
            {
                id: 2,
                name: "Ammamore",
                
            }
        ]
    },
    {
        name: "Wheat",
        
        district: "Nashik",
        subCategory: [
            {
                id: 1,
                name: "Durum",
                
            },
            {
                id: 2,
                name: "Emmer",
                
            }
        ]
    },
    {
        name: "Barley",
        
        district: "Ratnagiri",
        subCategory: [
            {
                id: 1,
                name: "Hulless Barley",
               
            },
            {
                id: 2,
                name: "Barley Flakes",
                
            }
        ]
    },
    {
        name: "Barley",
        
        district: "Thane",
        subCategory: [
            {
                id: 1,
                name: "Hulless Barley",
                
            },
            {
                id: 2,
                name: "Barley Flakes",
                
            }
        ]
    }
];

4. crop.service.ts

import { Injectable } from "@angular/core";

import { Observable, of } from "rxjs";

import { Crop, CropFilter, } from "../shared/crop.model";
import { CROPS } from "../shared/crop.data";
import { CROPSFILTER } from '../shared/cropFilter';


@Injectable({
  providedIn: "root"
})
export class CropService {
  constructor() { }

  crops: Crop[] = CROPS;
  cropFilterCheckbox: CropFilter[] = CROPSFILTER;

  getAllCrops(): Observable<Crop[]> {
    return of(this.crops);
  }

  getCropFilter(): Observable<CropFilter[]> {
    return of(this.cropFilterCheckbox)
  }

  
  
  }
}

5. all-trade.component.ts

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Crop, CropFilter, DistrictFilter } from 'src/app/shared/crop.model';
import { CropService } from '../crop.service';



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

  crops$: Observable<Crop[]>;
  cropFilterCheckbox$: Observable<CropFilter[]>
  districtFilterCheckbox$: Observable<DistrictFilter[]>

  constructor(private cropService: CropService) { }

  ngOnInit(): void {
    this.crops$ = this.cropService.getAllCrops()
    console.log(this.crops$);

    this.cropFilterCheckbox$ = this.cropService.getCropFilter()


  }

}

6. all-trade.component.html

<div
  fxLayout="row"
  fxLayout.lt-md="column"
  fxLayoutAlign="space-between start"
  fxLayoutAlign.lt-md="start stretch"
  *ngIf="crops$ | async"
>
  <div class="container-outer" fxFlex="20">
    <div class="filters">
      <section class="example-section">
        <span class="example-list-section">
          <h1>Select Crop</h1>
        </span>
        <span class="example-list-section">
          <ul>
            <li *ngFor="let filter of cropFilterCheckbox$ | async">
              <mat-checkbox [checked]="filter.checked">
                
              </mat-checkbox>
            </li>
          </ul>
        </span>
      </section>

      <section class="example-section">
        <span class="example-list-section">
          <h1>Select District</h1>
        </span>
        <span class="example-list-section">
          <ul>
            <li *ngFor="let filter of districtFilterCheckbox$ | async">
              <mat-checkbox [checked]="filter.checked">
                
              </mat-checkbox>
            </li>
          </ul>
        </span>
      </section>
    </div>
  </div>
  <div class="content container-outer" fxFlex="80">
    <mat-card
      class="crop-card"
      style="min-width: 17%"
      *ngFor="let crop of crops$ | async"
    >
      <a [routerLink]="[crop.name]">
        <mat-card-header>
          <img
            mat-card-avatar
            class="example-header-image"
            src="/assets/icons/crops/.PNG"
            alt="crop-image"
          />
          <mat-card-title></mat-card-title>
          <mat-card-subtitle>100 Kgs</mat-card-subtitle>
        </mat-card-header>
      </a>
      <mat-card-content>
        <p>PRICE</p>
      </mat-card-content>
      <mat-card-content>
        <!-- <p></p> -->
      </mat-card-content>
    </mat-card>
  </div>
</div>