Angular Dropdown Select Change Event Example

In this tutorial we will go over the demonstration of change event in dropdown angular. if you have question about get dropdown selected value on change in angular then i will give simple example with solution. We will look at example of angular dropdown on change event. if you have question about change event on select box in angular then i will give simple example with solution.

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 - HDTuto.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 = ['HDTuto.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:

HDTuto.com

I hope it can help you...