Cascading DropDown In Angular 2

To know about the basics and how to get started with Angular 2, please read the following articles first and add mandatory files and npm_modules to your application.

Getting Started

Start Visual Studio.
Create a new website.
Provide the name and the location of website.
Click "Next".

Once all the files are added and npm_module is installed, let’s work on how to show data.

First of all, add two components and make some properties with data type.

Country.ts

export class Country {
constructor(
public id: number,
public name: string) {}
}

State.ts

export class State {
constructor(
public id: number,
public countryid: number,
public name: string) {}
}

Now, add a component for data and provide name like CountryService. Add some data for Country and States.

import {
Injectable
} from '@angular/core';
import {
Country
} from './country';
import {
State
} from './state';
@Injectable()
export class CountryService {
getCountries() {
return [
new Country(1, 'United States'),
new Country(2, 'India'),
new Country(3, 'Australia'),
new Country(4, 'New Zealand'),
new Country(5, 'South Africa'),
new Country(6, 'United Kingdom')
];
}
getStates() {
return [
new State(1, 1, 'Alabama'),
new State(2, 1, 'Alaska'),
new State(3, 1, 'Arizona'),
new State(5, 1, 'Arkansas'),
new State(6, 1, 'California'),
new State(7, 1, 'Colorado'),
new State(8, 1, 'Connecticut'),
new State(9, 1, 'Delaware'),
new State(10, 1, 'Florida'),
new State(11, 1, 'Georgia'),
new State(12, 1, 'Hawaii'),
new State(13, 1, 'Idaho'),
new State(14, 1, 'Illinois'),
new State(15, 1, 'Indiana'),
new State(16, 2, 'New Delhi'),
new State(17, 2, 'Maharashtra'),
new State(18, 2, 'Goa'),
new State(19, 2, 'Punjab'),
new State(20, 2, 'Haryana'),
new State(21, 2, 'Uttar Pradesh'),
new State(22, 2, 'Rajasthan'),
new State(23, 2, 'Andhra Pradesh'),
new State(24, 2, 'Jharkhand'),
new State(25, 2, 'Madhya Pradesh'),
new State(26, 3, 'New South Wales'),
new State(27, 3, 'Tasmania'),
new State(28, 3, 'Qweensland'),
new State(29, 3, 'Western Australia'),
new State(30, 3, 'Victoria'),
new State(31, 4, 'Auckland'),
new State(32, 4, 'Wellington'),
new State(33, 4, 'Christchurch'),
new State(34, 4, 'Hamilton'),
new State(35, 4, 'Napier'),
new State(31, 5, 'Eastern Cape'),
new State(32, 5, 'Limpopo'),
new State(33, 5, 'Mpumalanga'),
new State(34, 5, 'North West'),
new State(35, 5, 'Northern Cape'),
new State(31, 6, 'Herefordshire'),
new State(32, 6, 'Durham'),
new State(33, 6, 'Manchester'),
new State(34, 6, 'South Yorkshire'),
new State(35, 6, 'Birmingham')
];
}
}

Add a new component and reference for country, state, and data service.

import {
Component
} from '@angular/core';
import {
CountryService
} from './shared/countryservice';
import {
Country
} from './shared/country';
import {
State
} from './shared/state';
@Component({
selector: 'country-component',
templateUrl: 'app/countrycomponent.html',
providers: [CountryService]
})
export class CountryComponent {
selectedCountry: Country = new Country(0, 'India');
countries: Country[];
states: State[];
constructor(private _countryService: CountryService) {
this.countries = this._countryService.getCountries();
}
onSelect(countryid) {
this.states = this._countryService.getStates().filter((item) => item.countryid == countryid);
}
}

Here is my HTML code.

<label>Country:</label>
<select [(ngModel)]="selectedCountry.id" (change)="onSelect($event.target.value)">
<option value="0">--Select Country--</option>
<option *ngFor="let country of countries" value={{country.id}}>{{country.name}}</option>
</select>
<br /><br />
<div>
<label>State:</label>
<select>
<option *ngIf='selectedCountry.id == 0' value="0">--Select State--</option>
<option *ngFor="let state of states " value={{state.id}}>{{state.name}}</option>
</select>
</div>

Now, add reference for the component and data service on module component, like the following.

import {
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import {
HttpModule
} from '@angular/http';
import {
CountryComponent
} from './countrycomponent';
import {
CountryService
} from './shared/countryservice';
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule],
declarations: [CountryComponent],
providers: [CountryService],
bootstrap: [CountryComponent]
})
export class AppModule {};

Now, let’s work on default and add mandatory Angular files and add components.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="app/css/styles.css" rel="stylesheet" />
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(
function(err) {
console.error(err);
});
</script>
</head>
<body>
<header class="navbar navbar-inner navbar-fixed-top">
<nav class="container">
<div class="navbar-header">
<span class="app-title">Cascading DropDown in Angular 2</span>
</div>
</nav>
</header>
<main class="container">
<country-component>Loading...</country-component>
</main>
</body>
</html>

Run the application.

Select a country to see the states list.

Conclusion

In this article, we have learned how to use cascading DropDown in Angular 2. If you have any questions or comments, drop me a comment in the comments section.

6 Comments

Join the conversation! Your thoughts help the community grow.

Pankaj Kr7y ago
Nice article. for 3 level cascade dropdown I found below link: https://jsonworld.com/blog/cascading-dropdown-in-angular
Manav Pandya8y ago
Thanks for sharing such stuff
Mitesh Gadhiya9y ago
Your blog is very useful but I want to do use the cascading dropdown in the table. it would be great if you can share some helpful link or article.
Shubashree Ravi9y ago
Useful and highly implementable.
Thennarasu N9y ago
Great article and easy Explain
sreenivasa k9y ago
Nice article. and worth reading.