how to filter or map the object when checkbox event fired and how to set display 'block' when checkbox selected

I'm new to angular 13 and am having some issues and would be grateful for any pointers. On my project there are components for rendering opportunities(opps) object, a component for filter list...etc. When Event fired, I want to capture the Event.target.value, loop through opportunities object, compare Event.target.value with opp.CATEGORYID, opp.PROVIDERNAME or opp.TAGS and then set display 'block' or 'none' to render on the screen. In summary, opportunities are already rendered and I want to show opportunities when its display is 'block' but I'm struggling how to set display 'block' or 'none' conditionally. Thank you so much any advice.

opp-list-component.html

<mat-card *ngFor="let opp of opps" 
 class="oppContainer"
 [attr.data-opp-id]=" 'opp_' + opp.PLACEMENTID "
 [attr.data-filters-cat]="opp.CATEGORYID"
 [attr.data-filters-tags]="opp.TAGS"
 [attr.data-filters-provider]="opp.PROVIDERNAME"
 [attr.data-filters-location]="opp.LOCATIONTYPE"
 [attr.data-filters]="opp.TAGS + ',' +opp.CATEGORYID + ',' + opp.PROVIDERNAME + ','+ opp.LOCATIONTYPE + ',' + opp.BADGEASSETID "
 [style.border-left]="'10px solid ' + 'rgb'+ '(' + opp.COLOURCODE +')' "
 [style.display]="displayOpps"
>
   <mat-card-header >
     <img  mat-card-image src="https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Photo of a Shiba Inu">
   </mat-card-header>
     <p >
       <a [routerLink]="'/about'"></a> > <a [routerLink]="'/about'"></a>
     </p>
 
     <p> 
       <a [routerLink]="'/about'"></a>
     </p> 
 
     <p textColor></p>
 
     <p><mat-icon> place</mat-icon> miles away</p>
    
       <mat-card-footer >
         <p><mat-icon> local_offer</mat-icon> </p>
       </mat-card-footer> 
   </mat-card> 

filter-list-component.html

<mat-card-title><h2>Filters</h2></mat-card-title>

   <div class="filter-contents">

    <h3>Category</h3>
    <div  *ngFor = "let cat of cats">
      <p class="bb">
      <label class="cat-label" for=""
      [style.border-left]="'10px solid ' + 'rgb'+ '(' + cat.COLOURCODE +')' "
      >
         (  )
      <input type="checkbox" 
      (change)="onChange($event)"
      value=""
      >
      </label>
    </p>
    </div>
  

  
    <h3>Organizations</h3>
    <div *ngFor="let provider of providers">
      <p class="bb">
      <label for="">
         (   )
      <input type="checkbox" 
      (change)="onChange($event)"
      value="">
      </label>
    </p>
    </div> 
  
  
  
    <h3>Tags</h3>
    <div  *ngFor="let tag of tags">
      <p class="bb">
      <label for="">
         (  )
        <input type="checkbox" 
        (change)="onChange($event)"
        value="">
      </label>
     </p>
    </div>

  </div> 
  
   </mat-card>  

search-component.ts (parent component)

receiveEvent(event:any) {
 
 this.checkboxEvent = event;
 this.eventValue = event.target.value;
 this.eventChecked = event.target.checked;;
 
 console.log(this.eventValue," this.eventValue from search c!!")
 console.log(this.eventChecked ,"this.eventChecked  from search c!!")


   if(event){
    this.displayOpps = 'block'
   }  

 
   
   //how to do that ??
   //loop through this.opps object

   //check event.target.value === opp.CATEGORYID or 
   //event.target.value === opp.PROVIDERNAME or
   //opp.TAGS.includes(event.target.value.toLowerCase())

   //if false
   //this.displayOpps = 'none'

  

}