Filter items from a drop-down list

Question

In an HTML table, I have a dropdown list on the right, which is called type, there are two items (in and out).

img1

My goal is to filter the items: If I select from my IN dropdown, I should see all the items in the HTML here is an example.

img2

My problem is that when I choose an item from my list. For example IN, HTML table data does not filter. Unfortunately, I don't get any error message...

I tried to debug:

public selectedBrand: any; 
public onChangeType(type:any) {
    console.log("Begin ");
    
    this.selectedBrand=type;
        this.filteredCustomer=this.customerTransferts.filter(
          (item) => item.type === this.selectedBrand
        );
        console.log("Data");
        console.log(this.filteredCustomer);     
}

I don't have any error

img3

I have the impression that there is a problem in the HTML?

<select class="form-select" style="max-width: 100px" [ngModel]="selectedBrand" (ngModelChange)="onChangeType($event)">
   <option [value]="'IN'">IN</option>
   <option [value]="'OUT'">OUT</option>
</select>

Thank you for your help.

Answer 1

Make sure to have case insensitive filter if needed

Change the code like this and try again

this.filteredCustomer = this.customerTransferts.filter(
    item => item.type.toLowerCase() === this.selectedBrand.toLowerCase()
);