How to call function on change event in Angular

Question

I want to call a function, once the value of dropdown is changed.

I have done this without Angular Material. Here's my ts and html files.

  selected="pending";
  
  getRequests(event: any) {
    this.selected = event.target.value;
    if(this.selected=="pending")
    console.log("Inside Pending Requests")
    else
    console.log("Inside Granted Requests")
  }

<div style="margin-left: 70%;" appearance="fill">
  <select (change)="getRequests($event)">
    <option value="pending">Pending</option>
    <option value="granted">Granted</option>
  </select>
</div>

Now, I want to implement this with the help of Angular Material Select Component. Calling the getRequests() function is not working as expected. Somebody please help me on this one. Thanks in advance.

<mat-form-field style="margin-left: 70%;" appearance="fill">
<mat-label>Status</mat-label>
<mat-select [(value)]="selected" (change)="getRequests($event)" >
  <mat-option value="pending">Pending</mat-option>
  <mat-option value="granted">Granted</mat-option>
</mat-select>

When you use any library, check the API, in material e.g. you has [here](https://material.angular.io/components/select/api). The properties marked as `@Output` are the events you can attach, see that all has some like `EventEmitter`, the `T` is the type of the `$event` you pass to the function. BTW, if only want change a variable use `[(ngModel)]="your variable`, to make a [two-ways-binding](https://angular.io/guide/built-in-directives#displaying-and-updating-properties-with-ngmodel) — Eliseo, Nov 02 '22 at 11:45

score 3 · Answer 1 · answered Nov 02 '22 at 11:03

3

The api is selectionChange i.e. (selectionChange)="getRequests($event)".

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

answered Nov 02 '22 at 11:03

Andrew Allen

6,512
5
30
73

score 3 · Answer 2 · answered Nov 02 '22 at 11:05

3

In Angular Material Design 6 and above, the (change) method was removed. Instead use selectionChange

<mat-select (selectionChange)="doSomething($event)">

Read more about here: Angular 6 Material mat-select change method removed

answered Nov 02 '22 at 11:05

Stacks Queue

848
7
18

score 3 · Answer 3 · answered Nov 02 '22 at 11:06

Use selectionChange intead of change

<mat-form-field style="margin-left: 70%;" appearance="fill">
<mat-label>Status</mat-label>
<mat-select [(value)]="selected" (selectionChange)="getRequests($event)" >
  <mat-option value="pending">Pending</mat-option>
  <mat-option value="granted">Granted</mat-option>
</mat-select>

Then you should be able to access value from event object value property

 getRequests(event: MatSelectChange) {
    this.selected = event.value;
    if(this.selected=="pending")
    console.log("Inside Pending Requests")
    else
    console.log("Inside Granted Requests")
  }

Working Example

score 1 · Answer 4 · answered Nov 02 '22 at 11:04

your mat-select has an event that is emitted every time selection is changed. It is called selectionChange as per angular documentation: https://material.angular.io/components/select/api so maybe try to chage your (change) to (selectionChange) like this:

<mat-form-field style="margin-left: 70%;" appearance="fill">
<mat-label>Status</mat-label>
<mat-select [(value)]="selected" (selectionChange)="getRequests($event)" >
  <mat-option value="pending">Pending</mat-option>
  <mat-option value="granted">Granted</mat-option>
</mat-select>

How to call function on change event in Angular

4 Answers4