In this article, we will learn How to Create a Cascading Dropdown List in Angular. In any web application Cascading or Dependent Dropdown List is a common requirement.
Let’s understand what cascading dropdowns are and why they are beneficial. A cascading dropdown also known as a dependent or interconnected dropdown, means one dropdown depends on the other.
This dynamic behavior can significantly improve the user experience, especially in scenarios where data hierarchy or interdependencies exist.
Let’s get started
Table of Contents
Create a New Angular Project
ng new cascadingdropdown
Create Json Data
path:/assets/data.json
{"countries":[
{
"id" : 1,
"name":"USA"
},
{
"id" : 2,
"name":"Australia"
},
{
"id" : 3,
"name":"Germany"
},
{
"id" : 4,
"name":"England"
}
],
"states":[
{
"id" : 1,
"name":"Califonia",
"country_id":1
},
{
"id" : 2,
"name":"Colorado",
"country_id":1
},
{
"id" : 3,
"name":"Sydney",
"country_id":2
},
{
"id" : 4,
"name":"Adelaide",
"country_id":2
},
{
"id" : 5,
"name":"Belin",
"country_id":3
},
{
"id" : 6,
"name":"Hamburg",
"country_id":3
},
{
"id" : 7,
"name":"London",
"country_id":4
},
{
"id" : 8,
"name":"East of England",
"country_id":4
}
]
}
Create Services
Next, write the service for fetching data, In this instance, we will utilize a JSON data file which is located in the assets folder.
ng g s Services/dropdownservices.service --skip-tests
path: Services/dropdownservices.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DropdownservicesService {
baseurl = 'assets/data.json';
constructor(private http:HttpClient) { }
getAll():any{
return this.http.get<any>(this.baseurl);
}
}
Create Component
ng g c dropdown/dropdown –skip-tests
path:/ dropdown/dropdown.ts
import { Component, OnInit } from '@angular/core';
import { DropdownservicesService } from '../services/dropdownservices.service';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
countries : any;
states:any;
selectedvalue:any={
id:0,name: ''
}
constructor(private dropdwonservice:DropdownservicesService){}
ngOnInit(): void {
this.getall();
this.onsubmit(this.selectedvalue.id);
}
getall(){
this.dropdwonservice.getAll()
.subscribe((data:any)=>{
this.countries = data,
console.log(this.countries)
})
}
onsubmit(country_id:any){
this.dropdwonservice.getAll().subscribe((response:any)=>{
this.states = response['states'].filter(
(response:any)=> response.country_id == country_id!.value
),
console.log(this.states);
})
}
}
path:/ dropdown/dropdown.html
<div>
<label for="country">Country</label>
<div class="input-group input-group-sm mb-3">
<select [(ngModel)]="selectedvalue.id" (change)="onsubmit($event.target)" class="form-select">
<option value="0">--Select country--</option>
<option *ngFor="let country of countries?.countries" [value]="country.id">{{ country.name }} </option>
</select>
</div>
<label for="state">State</label>
<div class="input-group input-group-sm mb-3">
<select class="form-select">
<option value="0">--Select country--</option>
<option *ngFor="let state of states" [value]="state.id">{{ state.name }} </option>
</select>
</div>
</div>
App Module
You must import HttpClientModule and FormsModule in the AppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DropdownComponent } from './dropdown/dropdown.component';
import { HttpClientModule } from '@angular/common/http'
import { FormsModule } from '@angular/forms'
@NgModule({
declarations: [
AppComponent,
DropdownComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
update app.component.ts
<div class="d-flex justify-content-center mt-5">
<div class="col-0">
<app-dropdown></app-dropdown>
</div>
</div>
More Related Articles – Create CRUD operation using Angular and ASP.NET Core Web API
Conclusion
Creating a Cascading Dropdown List in Angular enhances the user experience by providing dynamic and context-aware options. By following the steps outlined in this article, you can easily implement this feature in your Angular applications.
