Angular Material Select Dropdown Change Event Example

Hi,

Hello all! In this article, we will talk about angular material select dropdown change event. you'll learn mat-select change event angular 12. i explained simply about mat select change event angular. you will learn change event in angular material select. Let's get started with change event not working in angular material select.

In this post, i will give you two small example that will help you to adding select box change event in angular material. let's see both example with output:

Example 1:

src/app/app.component.html

<h4>Angular mat-select Change Event Example</h4>
<mat-form-field>
  <mat-label>Select Website</mat-label>
  <mat-select (selectionChange)="onSelectEvent($event.value)">
    <mat-option *ngFor="let website of websites" [value]="website.value">
      {{website.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

src/app/app.component.ts

import { Component } from '@angular/core';
    
interface Website {
  value: string;
  viewValue: string;
}
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'app-material3';
  
  websites: Website[] = [
    {value: '1', viewValue: 'ItSolutionStuff.com'},
    {value: '2', viewValue: 'HDTuto.com'},
    {value: '3', viewValue: 'Nicesnippets.com'}
  ];  
  
  onSelectEvent(value: any){
    console.log(value);
  }
}

Output:

{value: '2', viewValue: 'HDTuto.com'}

Example 2:

src/app/app.component.html

<h4>Angular mat-select Change Event Example</h4>
     
<mat-form-field>
  <mat-label>Select Website</mat-label>
  <mat-select>
    <mat-option *ngFor="let website of websites" [value]="website.value" (onSelectionChange)="onSelectEvent($event, website)">
      {{website.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

src/app/app.component.ts

import { Component } from '@angular/core';
    
interface Website {
  value: string;
  viewValue: string;
}
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'app-material3';
  
  websites: Website[] = [
    {value: '1', viewValue: 'ItSolutionStuff.com'},
    {value: '2', viewValue: 'HDTuto.com'},
    {value: '3', viewValue: 'Nicesnippets.com'}
  ];
  
  onSelectEvent($event:any, web: Website){
    console.log(web);
  }
}

Output:

{value: '2', viewValue: 'HDTuto.com'}