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...
Do you like below Tutorials ?
- Laravel 7.x and 6.x Ajax Multiple Image Upload with Preview Example
- Laravel select with count(*) using db raw example
- PHP Laravel select with join subquery example
- PHP Laravel Ajax Form Submit Example
- How to create events for created/updated/deleted model task in Laravel 5?
- Angular JS Form Validation Example Code
- AngularJS - Confirm Password Validation Example
- Laravel Ajax Request using X-editable bootstrap Plugin Example