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.

• Angular 2 - Getting Started
• Show data using Angular 2 

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" />
    <!-- Polyfill(s) for older browsers -->
    <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>
    <!-- Configure SystemJS -->
    <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.