drop down list with a button-CodePudding

In fact, I have a dropdown that filters records on an HTML table without a button.

The filter works perfectly without the button.

public selectedBrand: any;
public onChangeType(type: any) {
    this.selectedBrand = type;
    this.filteredCustomer = this.customerTransferts.filter(
        (item) => item.type === this.selectedBrand
    );
}

HTML

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

I just want to know how can I filter my records with a confirmation button please?

I think I just have to modify the HTML code?

I tried this but nothing works.... The filter no longer works with the confirmation button.

<select  style="max-width: 100px" [ngModel]="selectedBrand">
   <option [value]="'IN'">IN</option>
   <option [value]="'OUT'">OUT</option>
</select>
<button type="button" (click)="onChangeType($event)" >Confirm</button>

CodePudding user response：

Something like this

<select  style="max-width: 100px" [(ngModel)]="selectedBrand">
    <option [value]="'IN'">IN</option>
    <option [value]="'OUT'">OUT</option>
</select>
 <button type="button" (click)="onChangeType()" >Confirm</button>

and on ts

public onChangeType() { 
    this.filteredCustomer = this.customerTransferts.filter(
        (item) => item.type === this.selectedBrand
    );
}