How to add on Change Event on Dropdown in Angular?

By Hardik Savani | March 14, 2020 | Category : Angular


In this tutorial, i will show you angular dropdown on change event. Here you will learn change event on select box in angular. i explained simply about angular change event on select. Here you will learn change event in dropdown angular. Here, Creating a basic example of get dropdown selected value on change in angular.

You can easily get dropdown selected value on change event in angular 6, angular 7, angular 8 and angular 9.

Here, i will give you very simple example to getting selected option value by change event with reactive form. here we will create one website list dropdown and if you choose anyone then it will by print console selected value on change event. we created changeWebsite() that will call on change of dropdown value. so let's see app.component.html and app.component.ts file bellow.

So, let's see example

src/app/app.component.html

<div class="container">

<h1>Angular Select Dropdown Example - ItSolutionStuff.com</h1>

<form [formGroup]="form" (ngSubmit)="submit()">

<div class="form-group">

<label for="website">Website:</label>

<select formControlName="website" class="form-control" (change)="changeWebsite($event)">

<option disabled>Select Website</option>

<option>Choose Website</option>

<option *ngFor="let web of websiteList">{{web}}</option>

</select>

<div *ngIf="f.website.touched && f.website.invalid" class="alert alert-danger">

<div *ngIf="f.website.errors.required">Name is required.</div>

</div>

</div>

<button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>

</form>

</div>

src/app/app.component.ts

import { Component } from '@angular/core';

import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

websiteList: any = ['ItSolutionStuff.com', 'HDTuto.com', 'Nicesnippets.com']

form = new FormGroup({

website: new FormControl('', Validators.required)

});

get f(){

return this.form.controls;

}

submit(){

console.log(this.form.value);

}

changeWebsite(e) {

console.log(e.target.value);

}

}

Output:

ItSolutionStuff.com

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: