In this example, we’ll see how to get angular material select change event.
mat-select
is a form control for selecting a value from a set of options.
mat-select
emit the event when selected value has been changed by user.
Sample code
<mat-select (selectionchange)="onFoodChange($event)">
<mat-option *ngfor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
The function onFoodChange
in the above code will be called when selected value has been changed by user.
We’re also passing $event
which will help to get the current selected value.
angular mat-select emit the object with the following 2 properties
Name | Description |
source: MatSelect | Reference to the select that emitted the change event. |
value: any | Current value of the select that emitted the event. |
Table of Contents
Example
Now we’ll see dependent dropdown example to see how can we use angular material select change event.
We’ll show two dropdown one is for list of categories and based on the selected category we’ll show other dropdown for products.
Structure of the product will looks like the following:

Create Model Files
Now create required model files
src/models/category.ts
export interface Category {
id: number;
name: string;
}
src/models/product.ts
export interface Product {
id: number;
name: string;
categoryId: number
}
Create Data Service
Now create data service which will return the static data for categories and products.
import { Injectable } from '@angular/core';
import { Category } from '../models/category';
import { Product } from '../models/product';
const categories: Category[] = [
{ id: 1, name: 'Fruit' },
{ id: 2, name: 'Vegetables' },
{ id: 3, name: 'Nut' }
];
const products: Product[] = [
{ id: 1, name: 'Grapes', categoryId: 1 },
{ id: 2, name: 'Apples', categoryId: 1 },
{ id: 3, name: 'Lemons', categoryId: 1 },
{ id: 4, name: 'Bananas', categoryId: 1 },
{ id: 5, name: 'Mangoes', categoryId: 1 },
{ id: 6, name: 'Beets', categoryId: 2 },
{ id: 7, name: 'Cabbage', categoryId: 2 },
{ id: 8, name: 'Carrot', categoryId: 2 },
{ id: 9, name: 'Onions', categoryId: 2 },
{ id: 10, name: 'Peanuts', categoryId: 3 },
{ id: 11, name: 'Walnuts', categoryId: 3 },
{ id: 12, name: 'Almonds', categoryId: 3 }
];
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor() { }
fetchCategories() {
return categories;
}
fetchProducts(categoryId) {
return products.filter(product => product.categoryId == categoryId);
}
}
We’ll call the methods of this service from our component to get the data of dropdown.
fetchProducts
will be called when category is changed because we want to show only those products which are having categoryIs same as selected categoryId.
Import Material Modules
Now import necessary modules that we need for this example.
Here is app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule,
MatFormFieldModule,
ReactiveFormsModule,
MatSelectModule,
MatButtonModule
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule { }
Create Component
Now out component file will looks as follows:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Category } from './models/category';
import { Product } from './models/product';
import { DataService } from './services/data.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
categories: Category[];
products: Product[];
form: FormGroup
constructor(private formBuilder: FormBuilder, private dataService: DataService) { }
ngOnInit() {
this.categories = this.dataService.fetchCategories();
this.form = this.formBuilder.group({
categoryId: [],
productId: []
});
}
onCategoryChange(event) {
this.products = this.dataService.fetchProducts(event.value);
this.form.patchValue({ productId: null });
}
save() {
console.log(this.form.value);
}
}
Here we’re using reactive form and we have added 2 properties into the form.
onCategoryChange
method will be called when user will change the category and it’ll fetch the products based on selected category and we’ll set productId to null when category change.
Template File
<h1>Angular Material Select Example</h1>
<form [formgroup]="form" (ngsubmit)="save()">
<mat-form-field>
<mat-label>Category</mat-label>
<mat-select formcontrolname="categoryId" (selectionchange)="onCategoryChange($event)">
<mat-option *ngfor="let category of categories" [value]="category.id">
{{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Product</mat-label>
<mat-select formcontrolname="productId">
<mat-option *ngfor="let product of products" [value]="product.id">
{{product.name}}
</mat-option>
</mat-select>
</mat-form-field>
<br>
<button mat-raised-button="" color="primary">Save</button>
</form>
Selected Values: {{form.value | json}}
Output

and that’s it, I hope you like this article.
Also Read
- Angular Material Date Range Picker
- What’s new in Angular 10
- How to install angular material in Angular Application
- How to use Angular APP_INITIALIZER token
- How to use environment variable in Angular application
- Integrate CKEditor(rich text editor) in Angular
- How to check Angular CLI version and how to update it.
- Different ways to install bootstrap 4 in angular application
- How to define global constants(variables) in angular