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.

app.module.ts

Import ReactiveFormsModule and HttpClientModule into app.module.ts

src/app/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.

src/app/csc.service.ts

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

src/app/create-account/create-account.component.ts

src/app/create-account/create-account.component.html

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

Database

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

Output




Complete!

This lesson also available on YouTube
Cascading Dropdown Dependent Dropdown Country State City

Please leave comments

2 Comments