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>

did you try <mat-select (change)="sortByProducts"> with sortByProducts(event) in your ts file ? — Bernard Pagoaga
– Bernard Pagoaga, Commented May 6, 2019 at 15:41
Does this answer your question? onselected event in md-select in Angular 4 — Vega
– Vega, Commented Jan 31, 2024 at 9:31

Bernard Pagoaga · Accepted Answer · 2019-05-06 16:05:31Z

31

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

answered May 6, 2019 at 16:05

Bernard Pagoaga

1,4361 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related