ItSolutionStuff.com

Angular Material Select Dropdown Change Event Example

By Hardik Savani October 20, 2023
Angular

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'}

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube