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>

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>

• javascript
• angular
• typescript

Share Improve this question Follow edited Nov 2, 2022 at 10:59 R. Richards 25.2k1010 gold badges6666 silver badges6565 bronze badges asked Nov 2, 2022 at 10:53 Amateur coderAmateur coder 122 silver badges44 bronze badges 1

• When you use any library, check the API, in material e.g. you has here. The properties marked as @Output are the events you can attach, see that all has some like EventEmitter<T>, 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 – Eliseo Commented Nov 2, 2022 at 11:45

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

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

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

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/ponents/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>