Angular Material Select Change Event Example

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

Angular material select change event example

and that’s it, I hope you like this article.

Download Source Code