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" />
- <!-- 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.