In this article, you will learn how to use cascading DropDownList using Angular application. In following tutorial you gonna use Angular CLI to create an application. Here is the official website of Angular CLI.

Why Angular CLI

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices. You can Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.Ruing test and you can easily test your app locally while developing.

Step 1 – 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.

ng new PROJECT-NAME
cd PROJECT-NAME
ng serve

Step2 – Add FormsModule module to imports array in the app.module.ts file.

Step 3 – Edit app.component.ts file. We have added few methods to supply sample data and onSelectCountry,onSelectState methods to detect the change in the parent drop down.

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


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

  selectedCountry = 0;
  selectedState = 0;

  title = 'app';
  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: 'India' },
      { id: 2, name: 'USA' },
      { id: 3, name: 'Australia' }
    ];
  }

  getStates() {
    return [
      { id: 1, country_id: 1, name: 'Andhra Pradesh' },
      { id: 2, country_id: 1, name: 'Madhya Pradesh' },
      { id: 3, country_id: 2, name: 'San Francisco' },
      { id: 4, country_id: 2, name: 'Los Angeles' },
      { id: 5, country_id: 3, name: 'New South Wales' },
      { id: 6, country_id: 3, name: 'Victoria' },
    ]
  }

  getCity() {
    return [
      { id: 1, state_id: 1, name: 'Guntur' },
      { id: 2, state_id: 1, name: 'Vijayawada' },
      { id: 3, state_id: 1, name: 'Nellore' },
      { id: 4, state_id: 1, name: 'Kadapa' },
      { id: 5, state_id: 2, name: 'Warangal' },
      { id: 6, state_id: 2, name: 'Hyderabad' },
      { id: 7, state_id: 2, name: 'Karimnagar' },
      { id: 8, state_id: 2, name: 'Kadapa' },
      { id: 9, state_id: 3, name: 'SOMA' },
      { id: 10, state_id: 3, name: 'Richmond' },
      { id: 11, state_id: 3, name: 'Sunset' },
      { id: 12, state_id: 4, name: 'Burbank' },
      { id: 13, state_id: 4, name: 'Hollywood' },
      { id: 14, state_id: 5, name: 'Sunset' },
      { id: 15, state_id: 5, name: 'Burbank' },
      { id: 16, state_id: 5, name: 'Hollywood' },
      { id: 17, state_id: 6, name: 'Benalla' },
      { id: 18, state_id: 6, name: 'Melbourne' },
    ]
  }
}

step 4 – now update your app.component.html view file with below content.

  

    

      Welcome to {{title}}!!
    
  

  

    Country:
    
       Select Country
      {{country.name}}
    
  

  

    States:
    
        Select State
      {{state.name}}
    
  

  

    City:
    
        Select City
        {{city.name}}
    
  

step 5 – As you already started server in the step 1, now you should able to see output something like below shown image. If your is not running, issue ng serve from the root of your project.
[#image]