Cascading Dropdown In Angular

In this article, I will explain how to use cascading dropdown list in Angular application. As usual, we will angular CLI for creating angular application.

What is Angular CLI?

Angular CLI stands for Angular Command Line Interface. As the name suggests, it is a command line tool for creating angular apps. It is recommended to use angular CLI for creating angular apps as you don't need to spend time installing and configuring all the required dependencies and writing everything together.

Create Angular App

Let's start by creating a new angular project. If angular CLI is not installed then install it from Angular CLI

So let create a project – This tutorial assumes that you have already installed “Angular CLI”, if not please visit here and install it. After successful installation you should able to run below command to create and to serve project.

Now we will use below command to create a new Angular app and start the app


ng new myApp

cd myApp

ng serve

After running above 3 commands basic angular will start running. You can check over browser over url http://localhost:4200

Now next task is to add FormsModule in app.module.ts file


import {FormsModule} from '@angular/forms'

After adding above line at the top add the FormsModule at the bottom in imports under @NgModule

Now our next task is to update the app.component.ts file, We will have some static data to perform the cascading task. Replace the below code:


import { Component } from '@angular/core';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

selectedCountry = 0;
selectedState = 0;

states = [];
cities = [];


onSelectCountry(country_id: number) {
this.selectedCountry = country_id;
this.selectedState = 0;
this.cities = [];
this.states = this.getStates().filter((item) => {
return item.country_id === Number(country_id)
});
}

onSelectState(state_id: number) {
this.selectedState = state_id;
this.cities = this.getCity().filter((item) => {
return item.state_id === Number(state_id)
});
}

getCountries() {
return [
{ id: 1, name: 'Country1' },
{ id: 2, name: 'Country2' },
{ id: 3, name: 'Country3' }
];
}

getStates() {
return [
{ id: 1, country_id: 1, name: 'State1 of country1' },
{ id: 2, country_id: 1, name: 'State2 of country2' },

{ id: 3, country_id: 2, name: 'State1 of country2' },

{ id: 4, country_id: 2, name: 'State2 of country2' },
{ id: 5, country_id: 3, name: 'State1 of country3' },
{ id: 6, country_id: 3, name: 'State2 of country3' },
]
}

getCity() {
return [
{ id: 1, state_id: 1, name: 'City1' },
{ id: 2, state_id: 1, name: 'City11' },
{ id: 3, state_id: 1, name: 'City12' },
{ id: 4, state_id: 1, name: 'City13' },
{ id: 5, state_id: 2, name: 'City14' },
{ id: 6, state_id: 2, name: 'City15' },
{ id: 7, state_id: 2, name: 'City16' },
{ id: 8, state_id: 2, name: 'City17' },
{ id: 9, state_id: 3, name: 'City18' },
{ id: 10, state_id: 3, name: 'City19' },
{ id: 11, state_id: 3, name: 'City20' },
{ id: 12, state_id: 4, name: 'City21' },
{ id: 13, state_id: 4, name: 'City23' },
{ id: 14, state_id: 5, name: 'City24' },
{ id: 15, state_id: 5, name: 'City25' },
{ id: 16, state_id: 5, name: 'City26' },
{ id: 17, state_id: 6, name: 'City27' },
{ id: 18, state_id: 6, name: 'City28' },
]
}
}

Now update the view of the app from default to one which we want. Update app.component.html file with below code:

<!--The content below is only a placeholder and can be replaced.-->
<div class="container">
<div class="row">
<h1>
Angular Cascading dropdown
</h1>
</div>
<div class="row">

<div class="form-group">
<label class="control-label" for="Country">Country:</label>
<select *ngIf="getCountries()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($event.target.value)" class="form-control input-lg" id="country"
>
<option value="0">Select Country</option>
<option *ngFor="let country of getCountries()" value= {{country.id}}>{{country.name}}</option>
</select>
</div>

<div class="form-group">
<label class="control-label" for="States">States:</label>
<select *ngIf="states" [(ngModel)]="selectedState" (change)="onSelectState($event.target.value)" class="form-control input-lg" id="state">
<option value="0">Select State</option>
<option *ngFor="let state of states" value= {{state.id}}>{{state.name}}</option>
</select>
</div>

<div class="form-group">
<label class="control-label" for="City">City:</label>
<select class="form-control input-lg" id="city">
<option *ngIf="!selectedState" value="0">Select City</option>
<option *ngFor="let city of cities" value= {{city.id}}>{{city.name}}</option>
</select>
</div>
</div>
</div>

Now check the app on browser over the link http://localhost:4200 you will see something like below. If app is not started then start is with ng serve or npm start.

Conclusion

Cascading dropdown in Angular is fast and easy.

That’s all for now. Thank you for reading and I hope this article will be very helpful to understand Cascading dropdown in angular.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

This article is originally posted over jsonworld