View video tutorial
ANGULAR Dropdown list
ANGULAR
The dropdown list can be implemented using the standard html select element with the ngModel, ngFor Angular directives.
Angular Dropdown list Example
➔ This example shows how dropdown list works in Angular.
Create a project by ng new dropdown1 command.
ng new dropdown1
app.module.ts file
Copy this file content to the target file.
Example
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Copy the code and try it out practically in your learning environment.
app.component.ts file
Copy this file content to the target file.
Example
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'dropdown';
stArray: any = [
{ "id": 101, "name": 'n1', "email": 'e1' },
{ "id": 102, "name": 'n2', "email": 'e2' },
{ "id": 103, "name": 'n3', "email": 'e3' }
]
selected: any = "";
m1(value: any) {
//this.idval=Number(value);
console.log("the selected value is " + this.stArray[value].name);
this.selected = this.stArray[value];
}
addData(id: any, name: any, email: any) {
const ob = { "id": id, "name": name, "email": email };
this.stArray.push(ob);
}
selected2: any=0;
stArray2: any = [
{ "id": 501, "name": 'n1', "email": 'e1' },
{ "id": 502, "name": 'n2', "email": 'e2' },
{ "id": 503, "name": 'n3', "email": 'e3' }
]
m2(ev: any) {
const value = ev.target.value;
this.selected2 = ev.target.value;
console.log(value);
}
addData2(id: any, name: any, email: any) {
const ob = { "id": id, "name": name, "email": email };
this.stArray2.push(ob);
}
}
Copy the code and try it out practically in your learning environment.
HTML app.component.html File
Copy this file content to the target file.
Example
<div class="container text-center mt-4">
<div class="row">
<div class="col">
<select class="form-select" #dd (change)='m1(dd.value)' aria-label="Default select example">
<option selected>select menu</option>
<option *ngFor='let s of stArray;let i=index;' [value]="i">{{s.id}}</option>
</select>
</div>
<div class="col">
You selected: {{selected | json}}
</div>
</div>
<div class="row">
<div class="col-6 my-3">
<form>
<div class="mb-3">
<input type="text" #t1 placeholder="Enter id" class="form-control" id="id" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<input type="text" #t2 placeholder="Enter name" class="form-control" id="name">
</div>
<div class="mb-3">
<input type="text" #t3 placeholder="Enter email" class="form-control" id="email">
</div>
<button type="button" value="Click" (click)="addData(t1.value,t2.value,t3.value)"
class="btn btn-primary m-2">Add Data</button>
</form>
</div>
</div>
</div>
<hr>
<div class="container text-center mt-4">
<div class="row">
<div class="col">
<select class='form-select' (change)='m2($event)'>
<option *ngFor='let st2 of stArray2' [value]="st2.id"> {{st2.id}} </option>
</select>
</div>
<div class="col">
You select ID: {{selected2}}
</div>
</div>
<div class="row">
<div class="col-6 my-3">
<form>
<div class="mb-3">
<input type="text" #t1 placeholder="Enter id" class="form-control" id="id" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<input type="text" #t2 placeholder="Enter name" class="form-control" id="name">
</div>
<div class="mb-3">
<input type="text" #t3 placeholder="Enter email" class="form-control" id="email">
</div>
<button type="button" value="Click" (click)="addData2(t1.value,t2.value,t3.value)"
class="btn btn-primary m-2">Add Data</button>
</form>
</div>
</div>
</div>
<hr>
Copy the code and try it out practically in your learning environment.
HTML index.html File
Copy this file content to the target file.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Copy the code and try it out practically in your learning environment.
Output
Run project by ng serve in command line (from inside project directory).
program output