Angular 6 Material mat-select change method removed

Angular 6 Material mat-select change Method Removed 😱 What now?

If you've been working with Angular 6 Material Design, you may have noticed that the (change) method has been removed. But don't panic! In this blog post, we're going to address this common issue and provide you with easy solutions for handling selection changes in <mat-select>. 🆒

The Problem 💔

In previous versions of Angular Material, you could use the (change) event binding to execute code in the component when the user changed the selection in a <mat-select>. However, with the introduction of Angular Material 6, this method has vanished into thin air. 😫

The Solution ✅

So, how can you replace the beloved (change) method to still execute code when the user changes the selection? Fear not, because there are a couple of simple alternatives you can use.

Solution 1: (selectionChange) Event Binding

With Angular Material 6, you can replace (change) with (selectionChange) event binding. This event is emitted when the user changes the selection in a <mat-select>.

Example usage:

<mat-select (selectionChange)="onSelectionChange($event)">
  <!-- options here -->
</mat-select>

In your component, define the onSelectionChange() method to handle the event:

onSelectionChange(event: MatSelectChange) {
  // Your code here
}

With this approach, you can easily execute code in response to selection changes.

Solution 2: Two-Way Data Binding with [(value)]

Another way to deal with selection changes in Angular Material 6 is to use two-way data binding with [(value)]. This allows you to bind the value of <mat-select> to a variable in your component and have it updated automatically when the selection changes.

Example usage:

<mat-select [(value)]="selectedValue">
  <!-- options here -->
</mat-select>

In your component, define the selectedValue variable:

selectedValue: string; // assuming the value is of type string

Now, whenever the user changes the selection, the selectedValue variable in your component will be updated accordingly.

Take Action! 🚀

Now that you know how to handle selection changes in Angular 6 Material, it's time to put this knowledge into action! Choose the approach that suits your needs, and start executing code when the user changes the selection. Don't let the disappearance of the (change) method stop you from creating amazing user experiences! 😉

Let us know in the comments which solution worked best for you, or if you have any other questions regarding Angular 6 Material Design. Happy coding! 💻