View video tutorial
ANGULAR Dropdown list
ANGULAR
The dropdown list can be implemented using the standard html select element in combination with the ngModel, ngFor Angular directives in a template-driven form.
Angular Dropdown list Example
➔ This example describe how dropdown list works in Angular.
Create a project by ng new dropdown3 command.
ng new dropdown3
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';
showtable = false;
showcard = false;
showdialog = false;
getProducts(): any[] {
return this.allPorducts;
}
allPorducts = [
{ id: 101, name: "Item1", stock: 5, price: 50, images: "/assets/desktop.jpg" },
{ id: 102, name: "Item2", stock: 10, price: 100, images: "/assets/laptop.jpg" }
]
product: any;
setProduct(product: any) {
this.product = product;
}
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.images =this.allPorducts[i].images;
}
}
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">Price: {{productdd.price}}</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-2">
<input type="checkbox" name="showtable" [(ngModel)]="showtable"> Show Table
</div>
</div>
</div>
<div class="container" *ngIf="showtable">
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Stock</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of allPorducts" (click)="setProduct(p)" data-bs-toggle="modal"
data-bs-target="#exampleModal">
<th scope="row">{{p.id}}</th>
<td>{{p.name}}</td>
<td>{{p.stock}}</td>
<td>{{p.price}}</td>
<td><img src="{{p.images}}" height="60px" width="60px" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-2">
<input type="checkbox" name="showcard" [(ngModel)]="showcard"> Show Card
</div>
<div class="col-3">
<input type="checkbox" name="showdialog" [(ngModel)]="showdialog"> Show Dialog
</div>
</div>
</div>
<div class="container">
<div class="row" *ngIf="showcard">
<div class="col" *ngIf="product">
<div class="card" style="width: 18rem;">
<div class="card-header">
<img src="{{product.images}}" height="200px" width="200px" />
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Id: {{product.id}}</li>
<li class="list-group-item">Name: {{product.name}}</li>
<li class="list-group-item">Quantiy: {{product.stock}}</li>
<li class="list-group-item">Price: {{product.price}}</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button> -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
*ngIf="showdialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><img [src]="product.images" height="200px" width="200px" /></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">Name: {{product.name}}</li>
<li class="list-group-item">Id: {{product.id}}</li>
<li class="list-group-item">Quantiy: {{product.stock}}</li>
<li class="list-group-item">Price: {{product.price}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</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
Output
Run project by ng serve in command line (from inside project directory).
program output