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. 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
– Eliseo, Commented Nov 2, 2022 at 11:45

Andrew Allen · Accepted Answer · 2022-11-02 11:03:47Z

3

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

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

answered Nov 2, 2022 at 11:03

Andrew Allen

8,1917 gold badges38 silver badges82 bronze badges

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

Comments

Stacks Queue · Accepted Answer · 2022-11-02 11:05:03Z

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 2, 2022 at 11:05

Stacks Queue

1,3321 gold badge11 silver badges22 bronze badges

Comments

Chellappan வ · Accepted Answer · 2022-11-02 11:06:00Z

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

LaCodeM · Accepted Answer · 2022-11-02 11:04:32Z

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>

Collectives™ on Stack Overflow

How to call function on change event in Angular

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related