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!

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

0 Comments

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