Understanding the (selectionChange) Event in Angular Material's mat-select

• The mat-select component had a (change) event that you could use to listen for changes in the selected option.

In Angular 6 and later (including Angular Material 6):

• The (change) event was removed.
• A new event, (selectionChange), was introduced to replace it.

Here's a breakdown of the change:

• Reason for the Change: The Angular Material team likely removed the (change) event for consistency or to align with broader framework patterns.
• Impact: If you were using the (change) event in your Angular 5 application, you'll need to update your code to use the new (selectionChange) event in Angular 6 and beyond.

How to Update Your Code:

1. Find Code Using (change): Look for places in your Angular 5 code where you're using the (change) event with mat-select. This might be in your component's template (<mat-select (change)="myChangeFunction()">).
2. Replace with (selectionChange): Replace the (change) event with the new (selectionChange) event: <mat-select (selectionChange)="myChangeFunction($event)">.
3. Update Function Signature (Optional): If your myChangeFunction function was expecting a raw DOM event object before, you might need to adjust its signature to accept the SelectionChange object emitted by (selectionChange). This object typically provides more details about the selection change, including the selected value or option.

Example (Before and After):

Before (Angular 5):

<mat-select [(ngModel)]="selectedValue" (change)="onSelectionChange()">
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.viewValue }}
  </mat-option>
</mat-select>

After (Angular 6 and later):

<mat-select [(ngModel)]="selectedValue" (selectionChange)="onSelectionChange($event)">
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.viewValue }}
  </mat-option>
</mat-select>

Key Points:

• Always keep your Angular Material library up-to-date to benefit from improvements and bug fixes.
• When upgrading Angular or Angular Material versions, be mindful of potential breaking changes in component APIs.
• Refer to the Angular Material documentation for the latest event names and usage guidelines for mat-select.

<mat-select [(ngModel)]="selectedValue" (change)="onSelectionChange()">
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.viewValue }}
  </mat-option>
</mat-select>

export class MyComponent {
  selectedValue: any;
  options = [
    { value: 'option1', viewValue: 'Option 1' },
    { value: 'option2', viewValue: 'Option 2' },
  ];

  onSelectionChange() {
    // This function will be called whenever the selected option changes
    console.log('Selected value:', this.selectedValue);
  }
}

In this example, the (change) event is bound to the mat-select component. When the user selects a different option, the onSelectionChange() function will be called, and you can access the newly selected value through this.selectedValue.

<mat-select [(ngModel)]="selectedValue" (selectionChange)="onSelectionChange($event)">
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.viewValue }}
  </mat-option>
</mat-select>

export class MyComponent {
  selectedValue: any;
  options = [
    { value: 'option1', viewValue: 'Option 1' },
    { value: 'option2', viewValue: 'Option 2' },
  ];

  onSelectionChange(event: MatSelectionChange) {
    // This function will be called whenever the selected option changes
    console.log('Selected value:', event.value);
  }
}

Here, the (change) event is replaced with the new (selectionChange) event. This event emits a MatSelectionChange object containing details about the selection change, including the selected value (event.value). The onSelectionChange() function now receives this object as an argument, allowing you to extract the information you need.

1. Using [(ngModel)] for Two-Way Data Binding:

   • If you're simply interested in reacting to changes in the selected value and don't need access to additional details provided by the (selectionChange) event, you can leverage two-way data binding with [(ngModel)]. This approach automatically updates a component property whenever the user selects a new option.

   Example:

   <mat-select [(ngModel)]="selectedValue">
     <mat-option *ngFor="let option of options" [value]="option.value">
       {{ option.viewValue }}
     </mat-option>
   </mat-select>
   
   export class MyComponent {
     selectedValue: any;
     options = [
       { value: 'option1', viewValue: 'Option 1' },
       { value: 'option2', viewValue: 'Option 2' },
     ];
   
     // Your component code will react to changes in `selectedValue`
   }
   

2. Using ViewChild with Native select Element (Limited Use Case):

   • In very specific scenarios where you absolutely need to access the raw DOM element of the mat-select, you can use @ViewChild to get a reference to the underlying <select> element and then attach event listeners. However, this approach is generally discouraged because it bypasses Angular's change detection mechanism and might lead to unexpected behavior.

   Example (Not Recommended):

   <mat-select #selectRef [(ngModel)]="selectedValue">
     <mat-option *ngFor="let option of options" [value]="option.value">
       {{ option.viewValue }}
     </mat-option>
   </mat-select>
   
   export class MyComponent {
     @ViewChild('selectRef') selectRef: any;
   
     ngAfterViewInit() {
       this.selectRef.nativeElement.addEventListener('change', (event) => {
         this.selectedValue = event.target.value;
         // Handle selection change
       });
     }
   
     // ...
   }