How to call function on change event in Angular-CodePudding

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>

CodePudding user response：

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

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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>