Cascading or Dependent Dropdown List [country/state/city] in Angular 6/7

Posted at: January 7, 2019 8:35 PM

In this lesson, you can learn how to create dependent dropdown list or create cascading dropdown list in Angular 7 dynamically from database using web api with example of country, state and city list.


Import ReactiveFormsModule and HttpClientModule into app.module.ts


Creating a Service

Create csc service for get countries, states and cities from web api.

Import HttpClient, HttpErrorResponse, throwError, catchError into CscService. You can see complete source code below of src/app/csc.service.ts.

Here is created methods getCountries, getStates and getCities for get countries, states and cities respectively from web api.


Create a Component

Import FormGroup, FormControl and CscService into src/app/create-account/create-account.component.ts

You can see complete source code below of create-account.component.ts



Web API Source Code

API created in PHP using CodeIgniter framework and MySQL database.

Create controller file application/controllers/Api.php

Create model file application/models/Api_model.php


Create countries, states and cities tables and insert data into these tables using below mysql queries.



You can watch video on Cascading or Dependent Dropdown List [country/state/city] in Angular 6/7

Cascading Dropdown Dependent Dropdown Country State City

Please leave comments

Speed Up Your Magento Store by 300%

Angular Templates

React Templates

Magento 2 Templates

truecodex launched free android app. You can download and install truecodex app on your mobile and get notification of the latest post.

Video Tutorials on YouTube