View video tutorial
ANGULAR Dropdown list
ANGULAR
Dropdown list can be implemented using standard html select element in template-driven form with ngModel, ngFor Angular directives.
Angular Dropdown list Example
➔ This example explain how dropdown list works in Angular.
Create a project by ng new dropdown2 command.
ng new dropdown2
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 {
constructor() {
this.getProducts();
}
title = 'dropdown';
getProducts(): any[] {
return this.allPorducts;
}
allPorducts = [
{ id: 101, name: "Item1", stock: 5, price: 500, discount: 0, netprice: 0, images: "/assets/desktop.jpg" },
{ id: 102, name: "Item2", stock: 10, price: 1000, discount: 0, netprice: 0, images: "/assets/laptop.jpg" },
{ id: 103, name: "Item3", stock: 10, price: 1500, discount: 0, netprice: 0, images: "/assets/laptop.jpg" }
]
productdd: any;
setData(i: any) {
this.productdd = new Object();
this.productdd.id = this.allPorducts[i].id;
this.productdd.name = this.allPorducts[i].name;
this.productdd.stock = this.allPorducts[i].stock;
this.productdd.price = this.allPorducts[i].price;
this.productdd.discount = this.discount(this.allPorducts[i].price);
this.productdd.netprice = this.allPorducts[i].price - this.discount(this.allPorducts[i].price);
this.productdd.images = this.allPorducts[i].images;
}
discount(price: number): number {
let dis: number = 0;
if (price < 1000) {
dis = (price * 0.10);
} else if (price >= 1000 && price <= 1500) {
dis = (price * 0.15);
} else if (price > 1500) {
dis = (price * 0.25);
}
return dis;
}
}
Copy the code and try it out practically in your learning environment.
Note: put the images in assets folder.
HTML app.component.html File
Copy this file content to the target file.
Example
<div class="container">
<div class="row">
<div class="col-3">
<p>select menu item</p>
<select size="8" class="form-select" aria-label="Default select example" #dd (change)="setData(dd.value)">
<option *ngFor="let p of allPorducts, let z =index " [value]="z">{{p.id}}</option>
</select>
</div >
<div class="col-1">
</div>
<div class="col-6" *ngIf="productdd">
<div class="card" style="width: 18rem;">
<div class="card-header">
<img src="{{productdd.images}}" height="200px" width="200px" />
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Id: {{productdd.id}}</li>
<li class="list-group-item">Name: {{productdd.name}}</li>
<li class="list-group-item">Quantiy: {{productdd.stock}}</li>
<li class="list-group-item" [ngClass]="{ good: productdd.price! < 1000, better: productdd.price! >= 1000 && productdd.price! < 1500, best: productdd.price! >=1500 }" >Price: {{productdd.price}}</li>
<li class="list-group-item">Discount: {{productdd.discount}}</li>
<li class="list-group-item">Net Price: {{productdd.netprice}}</li>
</ul>
</div>
</div>
</div>
</div>
Copy the code and try it out practically in your learning environment.
CSS app.component.css file
Copy this file content to the target file.
Example
.good {
background-color: rgb(203, 240, 240);
}
.better {
background-color: rgb(124, 199, 199);
}
.best {
background-color: rgb(16, 122, 122);
color: white;
}
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