How to Create a Cascading Dropdown List in Angular

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

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.