Drop-down list that filters elements from a WebService

I have an HTML table with data from a WebService, I displayed the data.

enter image description here

I have a dropdown list on the right, which is called type, there are two items (in and out), and a confirmation button.

If I choose in my dropdown list the value in, all elements of the array are displayed after clicking on the button.

enter image description here

My problem is that I don’t know how to create valueSelected method?

public selectedBrand: any;
  public valueSelected() {
    this.service.getCustomerTransfert().filter(
      (item) => item.type === this.selectedBrand
    );
  }

I can provide you the complete code in TypeScript:

export class CustomerTransfertComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();
  customerTransferts: CustomerTransfert[] = [];


  constructor(
    private service: CustomerTransfertService, 
    private datePipe: CphFormatDatePipe, 
    private router: Router, 
    private modalService: BsModalService)
    { }

  ngOnInit(): void {
    this.getCustomerTransfert();
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  /* Display datas for the HTML table  */ 
  private getCustomerTransfert(): void {
    this.service.getCustomerTransfert().pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(res => {
      console.log("Step 1");
      
      this.customerTransferts = res.PREA.map(val => {
        console.log("Step 2");
        return {
          cler: val.CLER,
          num: val.NUM,
          ref_rbc: val.REF_RBC,
          type: val.TYPE,
          quantite: val.QUANTITE,
          isin: val.ISIN,
          trade_date: val.TRADE_DATE,
          reception_date: val.RECEPTION_DATE,
          statut: val.STATUT,
          label: val.LABEL,
          svm: val.SVM,
          coursMoyenAchat: val.COURS_MOYEN_ACHAT,
          personneContact: val.PERSONNE_CONTACT,
          tel: val.TEL,
          fax: val.FAX,
          date: val.DATE,
          traitementDate: val.TRAITEMENT_DATE,
          annulationDate: val.ANNULATION_DATE,
          intitule1: val.INTITULE1,
          contrepartie: val.CONTREPARTIE,     
          
        }
      });
    });
  }

  public selectedBrand: any;
  public valueSelected() {
    this.service.getCustomerTransfert().filter(
      (item) => item.type === this.selectedBrand
    );
  }


}

HTML

<div class="text-end">
   <div class="row row-cols-3 pt-3">
      <div class="col text-end">
         <label for="type" class="form-label">Type</label>
      </div>
      <div class="col-4">
         <select class="form-select" style="max-width: 100px">
            <option>In</option>
            <option>Out</option>
         </select>
      </div>
   </div>
   <div class="row row-cols-3 pt-3">
      <div class="col">
      </div>
      <div class="col text-start">
         <button type="submit" class="btn btn-primary">Confirmer</button>
      </div>
   </div>
</div>

Thank you very much for your help because I have no inspiration.