How do I implement an Angular Material mat-select change event?

Question

I want to implement the following bootstrap select in Angular Material. How do I implement the change event shown here in bootstrap?

<select (change)="sortByProducts($event.target.value)">
    <option *ngFor="let filter of filters" [value]="filter.id">
        {{filter.title}}
    </option>
</select>

How do I add the change event to material that calls the sortByProducts function as done in the code segment shown above?

<mat-form-field>
   <mat-select>
       <mat-option *ngFor="let filter of filters" [value]="filter.id">
            {{filter.title}}
       </mat-option>
   </mat-select>
</mat-form-field>

Answer 1

There is a selectionChange output that you can use :

// html
<mat-select (selectionChange)="sortByProducts($event.value)">

// ts
sortByProducts(value) {
    console.log(value)
}

See https://material.angular.io/components/select/api