Breaking
Coding Birds Online
Tag

angular country state city dropdown example

Browsing
Angular

Country State City Dropdowns in Angular Step By Step

By

Hi, Are you looking to build a dependent or cascading dropdown list dropdown in Angular? Then this blog post is for you. Here you will learn how to build country-state-city dropdowns in Angular step by step. This is called dependent dropdown or cascading dropdown functionality in web development.

This post focuses on creating country, state, and city dropdowns in Angular using PHP APIs. We will also discuss how to populate the dropdowns with data from a database or API and how to populate the select options from API. You check this demo also before starting to code.

Sounds great? Let’s move forward to learn how to build the dependent dropdown in Angular material using API from scratch.

So in this example, we will use PHP to mock the REST APIs in our Angular project. We will call these API endpoints to get the list of the data for countries, states & cities.

You may also like: How to Generate PDFs in PHP: A Beginner’s Guide

Discover how to generate PDFs in PHP dynamically! Learn to generate PDFs from HTML, on button click, and save them to a folder with our comprehensive guide.

Steps for Building Dependent Dropdowns for Location in Angular

  1. Install Node.js & Angular CLI
  2. Setup Angular project & UI
  3. Create Components, Modules & Service files
  4. Mock the REST APIs
  5. Run the code!!

1. Install Node.js & Angular CLI

If you don’t have Node on your machine then download it from the official website and install it. Once you are done now you need to install Angular. You can install the CLI using the npm package manager:

  1. npm install -g @angular/cli
npm install -g @angular/cli

2. Setup Angular project & UI

Now head over to your working directory in file explorer and open a command prompt or terminal and hit the following command. In this example, the project name is the “dependent_dropdown” we are creating.

  1. ng new dependent_dropdown
ng new dependent_dropdown

This command may take some time to complete depending on the internet connection you have. Once this is completed, move to the working directory by thiscd command and Install Angular Material via the following command.

  1. cd dependent_dropdown
  2. npm install bootstrap
  3. ng add @angular/material
cd dependent_dropdown
npm install bootstrap
ng add @angular/material

After installing these packages, go to angular.json file, inside architect > build > styles array add a new item "./node_modules/bootstrap/dist/css/bootstrap.min.css"

Also, if you are using Angular 15 so environment files will not be created, we need to set up those things manually. Create two files environment.ts and environment.prod.ts inside src > app > environments

Here is the screenshot for reference

Setting up bootstrap and environment files in Country State City Dropdowns in Angular

3. Create Components, Modules & Service files

Since we are using Angular Material, hence we need to import certain modules, so instead we will create a file AngularMaterialModule and import all required modules & finally import this module to AppModule. We need to create a service file also, to write some business logic to call HTTP services.

  1. ng generate module angular-material
  2. ng generate service services/dropdown // This will generate inside services folder
ng generate module angular-material
ng generate service services/dropdown // This will generate inside services folder

Update these files as follows.

AngularMaterialModule

  1. import { CommonModule } from '@angular/common';
  2. import { NgModule } from '@angular/core';
  3. import { MatProgressBarModule } from '@angular/material/progress-bar';
  4. import { MatFormFieldModule } from '@angular/material/form-field';
  5. import { MatInputModule } from '@angular/material/input';
  6. import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
  7. import { MatSelectModule } from '@angular/material/select';
  9. const materialModules = [
  10. MatInputModule,
  11. MatProgressBarModule,
  12. MatProgressSpinnerModule,
  13. MatSelectModule,
  14. MatFormFieldModule,
  15. ];
  16. @NgModule({
  17. imports: [CommonModule, ...materialModules],
  18. exports: [...materialModules],
  19. })
  20. export class AngularMaterialModule {}
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';

const materialModules = [
  MatInputModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatSelectModule,
  MatFormFieldModule,
];
@NgModule({
  imports: [CommonModule, ...materialModules],
  exports: [...materialModules],
})
export class AngularMaterialModule {}

Now import this file into the AppModule file as below.

AppModule

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { AppRoutingModule } from './app-routing.module';
  4. import { AppComponent } from './app.component';
  5. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  6. import { AngularMaterialModule } from './angular-material.module';
  7. import { HttpClientModule } from '@angular/common/http';
  8. import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  10. @NgModule({
  11. declarations: [AppComponent],
  12. imports: [
  13. BrowserModule,
  14. AppRoutingModule,
  15. BrowserAnimationsModule,
  16. AngularMaterialModule, // <--added
  17. HttpClientModule, // <--added
  18. FormsModule, // <--added
  19. ReactiveFormsModule, // <--added
  20. ],
  21. providers: [],
  22. bootstrap: [AppComponent],
  23. })
  24. export class AppModule {}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material.module';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularMaterialModule, // <--added
    HttpClientModule, // <--added
    FormsModule, // <--added
    ReactiveFormsModule, // <--added
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now let’s add some HTML UI to our component HTML file. Update your app.component.html code.

app.component.html

  1. <mat-progress-bar
  2. mode="indeterminate"
  3. color="accent"
  4. *ngIf="loading"
  5. ></mat-progress-bar>
  7. <div class="container mt-4">
  8. <div class="mt-3 mb-3" style="text-align: center">
  9. <img
  10. src="https://codingbirdsonline.com/wp-content/uploads/2020/01/cropped-coding-birds-online-favicon-180x180.png"
  11. width="50"
  12. />
  13. </div>
  14. <div class="card example-card" style="width: 50rem">
  15. <div class="card-body">
  16. <h5 class="card-title text-center m-2">Country, State & City Dropdown</h5>
  17. <form [formGroup]="dropdownForm">
  18. <div class="d-flex justify-content-center mt-4">
  19. <div class="p-2">
  20. <mat-form-field appearance="outline">
  21. <mat-label>Country</mat-label>
  22. <mat-select
  23. disableRipple
  24. formControlName="country"
  25. (valueChange)="selectCountry($event)"
  26. >
  27. <mat-option value="">Select</mat-option>
  28. <mat-option
  29. *ngFor="let country of countries"
  30. [value]="country.id"
  31. [attr.data-country-name]="country.name"
  32. >{{ country.name }}
  33. </mat-option>
  34. </mat-select>
  35. </mat-form-field>
  36. </div>
  37. <div class="p-2">
  38. <mat-form-field appearance="outline">
  39. <mat-label>State</mat-label>
  40. <mat-select
  41. disableRipple
  42. formControlName="state"
  43. (valueChange)="selectState($event)"
  44. >
  45. <mat-option value="">Select</mat-option>
  46. <mat-option
  47. *ngFor="let state of states"
  48. [value]="state.id"
  49. [attr.data-state-name]="state.name"
  50. >{{ state.name }}
  51. </mat-option>
  52. </mat-select>
  53. </mat-form-field>
  54. </div>
  55. <div class="p-2">
  56. <mat-form-field appearance="outline">
  57. <mat-label>City</mat-label>
  58. <mat-select disableRipple formControlName="city">
  59. <mat-option value="">Select</mat-option>
  60. <mat-option
  61. *ngFor="let city of cities"
  62. [value]="city.id"
  63. [attr.data-city-name]="city.name"
  64. >{{ city.name }}
  65. </mat-option>
  66. </mat-select>
  67. </mat-form-field>
  68. </div>
  69. </div>
  70. <p *ngIf="dropdownForm.value.country">
  71. {{ dropdownForm.value | json }}
  72. </p>
  73. </form>
  74. </div>
  75. </div>
  76. </div>
<mat-progress-bar
  mode="indeterminate"
  color="accent"
  *ngIf="loading"
></mat-progress-bar>

<div class="container mt-4">
  <div class="mt-3 mb-3" style="text-align: center">
    <img
      src="https://codingbirdsonline.com/wp-content/uploads/2020/01/cropped-coding-birds-online-favicon-180x180.png"
      width="50"
    />
  </div>
  <div class="card example-card" style="width: 50rem">
    <div class="card-body">
      <h5 class="card-title text-center m-2">Country, State & City Dropdown</h5>
      <form [formGroup]="dropdownForm">
        <div class="d-flex justify-content-center mt-4">
          <div class="p-2">
            <mat-form-field appearance="outline">
              <mat-label>Country</mat-label>
              <mat-select
                disableRipple
                formControlName="country"
                (valueChange)="selectCountry($event)"
              >
                <mat-option value="">Select</mat-option>
                <mat-option
                  *ngFor="let country of countries"
                  [value]="country.id"
                  [attr.data-country-name]="country.name"
                  >{{ country.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="p-2">
            <mat-form-field appearance="outline">
              <mat-label>State</mat-label>
              <mat-select
                disableRipple
                formControlName="state"
                (valueChange)="selectState($event)"
              >
                <mat-option value="">Select</mat-option>
                <mat-option
                  *ngFor="let state of states"
                  [value]="state.id"
                  [attr.data-state-name]="state.name"
                  >{{ state.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
          <div class="p-2">
            <mat-form-field appearance="outline">
              <mat-label>City</mat-label>
              <mat-select disableRipple formControlName="city">
                <mat-option value="">Select</mat-option>
                <mat-option
                  *ngFor="let city of cities"
                  [value]="city.id"
                  [attr.data-city-name]="city.name"
                  >{{ city.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
        <p *ngIf="dropdownForm.value.country">
          {{ dropdownForm.value | json }}
        </p>
      </form>
    </div>
  </div>
</div>

app.component.css

  1. .example-card {
  2. margin: 0 auto;
  3. }
.example-card {
  margin: 0 auto;
}

app.component.ts

  1. import { Component, OnInit } from '@angular/core';
  2. import { DropdownService } from './services/dropdown.service';
  3. import { FormBuilder, FormGroup } from '@angular/forms';
  5. @Component({
  6. selector: 'app-root',
  7. templateUrl: './app.component.html',
  8. styleUrls: ['./app.component.css'],
  9. })
  10. export class AppComponent implements OnInit {
  11. title = 'Country-State-City Dropdown';
  12. public loading = false;
  13. public dropdownForm!: FormGroup;
  14. public countries: any[] = [];
  15. public states: any[] = [];
  16. public cities: any[] = [];
  18. constructor(
  19. private dropdownService: DropdownService,
  20. private formBuiler: FormBuilder
  21. ) {}
  22. ngOnInit(): void {
  23. /**
  24. * Intialize form with default value null
  25. */
  26. this.dropdownForm = this.formBuiler.group({
  27. country: [null],
  28. state: [null],
  29. city: [null],
  30. });
  31. /**
  32. * load all country data at page load
  33. */
  34. this.getCountries();
  35. }
  36. /**
  37. * loads all country data
  38. * @returns void
  39. */
  40. private getCountries() {
  41. this.loading = true;
  42. this.dropdownService.getCountries().subscribe(
  43. (response) => {
  44. this.countries = response.data;
  45. console.log(this.countries);
  46. this.loading = false;
  47. },
  48. (error) => {
  49. console.log('Something went wrong: ', error);
  50. }
  51. );
  52. }
  54. /**
  55. * Selects country, and gets the states for it
  56. * @param country
  57. * @returns void
  58. */
  59. public selectCountry(country: any) {
  60. if (!country) {
  61. this.dropdownForm.controls['state'].setValue('');
  62. this.dropdownForm.controls['city'].setValue('');
  63. this.states = [];
  64. this.cities = [];
  65. return;
  66. }
  67. this.loading = true;
  68. const countryId = parseInt(country);
  69. this.dropdownService.getStates(countryId).subscribe(
  70. (response) => {
  71. this.states = response.data;
  72. this.loading = false;
  73. },
  74. (error) => {
  75. console.log('Something went wrong: ', error);
  76. }
  77. );
  78. }
  80. /**
  81. * Selects the state and gets cities for it
  82. * @param state
  83. * @returns void
  84. */
  85. public selectState(state: any) {
  86. if (!state) {
  87. this.dropdownForm.controls['city'].setValue('');
  88. this.cities = [];
  89. return;
  90. }
  91. this.loading = true;
  92. const stateId = parseInt(state);
  93. this.dropdownService.getCities(stateId).subscribe(
  94. (response) => {
  95. this.cities = response.data;
  96. this.loading = false;
  97. },
  98. (error) => {
  99. console.log('Something went wrong: ', error);
  100. }
  101. );
  102. }
  103. }
import { Component, OnInit } from '@angular/core';
import { DropdownService } from './services/dropdown.service';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  title = 'Country-State-City Dropdown';
  public loading = false;
  public dropdownForm!: FormGroup;
  public countries: any[] = [];
  public states: any[] = [];
  public cities: any[] = [];

  constructor(
    private dropdownService: DropdownService,
    private formBuiler: FormBuilder
  ) {}
  ngOnInit(): void {
    /**
     * Intialize form with default value null
     */
    this.dropdownForm = this.formBuiler.group({
      country: [null],
      state: [null],
      city: [null],
    });
    /**
     * load all country data at page load
     */
    this.getCountries();
  }
  /**
   * loads all country data
   * @returns void
   */
  private getCountries() {
    this.loading = true;
    this.dropdownService.getCountries().subscribe(
      (response) => {
        this.countries = response.data;
        console.log(this.countries);
        this.loading = false;
      },
      (error) => {
        console.log('Something went wrong: ', error);
      }
    );
  }

  /**
   * Selects country, and gets the states for it
   * @param country
   * @returns void
   */
  public selectCountry(country: any) {
    if (!country) {
      this.dropdownForm.controls['state'].setValue('');
      this.dropdownForm.controls['city'].setValue('');
      this.states = [];
      this.cities = [];
      return;
    }
    this.loading = true;
    const countryId = parseInt(country);
    this.dropdownService.getStates(countryId).subscribe(
      (response) => {
        this.states = response.data;
        this.loading = false;
      },
      (error) => {
        console.log('Something went wrong: ', error);
      }
    );
  }

  /**
   * Selects the state and gets cities for it
   * @param state
   * @returns void
   */
  public selectState(state: any) {
    if (!state) {
      this.dropdownForm.controls['city'].setValue('');
      this.cities = [];
      return;
    }
    this.loading = true;
    const stateId = parseInt(state);
    this.dropdownService.getCities(stateId).subscribe(
      (response) => {
        this.cities = response.data;
        this.loading = false;
      },
      (error) => {
        console.log('Something went wrong: ', error);
      }
    );
  }
}

dropdown.service.ts

  1. import { HttpClient } from '@angular/common/http';
  2. import { Injectable } from '@angular/core';
  3. import { Observable } from 'rxjs';
  4. import { environment } from 'src/environments/environment';
  6. @Injectable({
  7. providedIn: 'root',
  8. })
  9. export class DropdownService {
  10. // Update your API path here
  11. private BASE_URL = environment.apiUrl;
  12. constructor(private http: HttpClient) {}
  14. /**
  15. * Fetch All Countries
  16. * @returns Observable
  17. */
  18. public getCountries(): Observable<any> {
  19. return this.http.get<any>(this.BASE_URL + 'getcountry');
  20. }
  21. /**
  22. * Get states for a country
  23. * @param countryId
  24. * @returns Observable
  25. */
  26. public getStates(countryId: number): Observable<any> {
  27. return this.http.get<any>(
  28. this.BASE_URL + 'getstate&country_id=' + countryId
  29. );
  30. }
  31. /**
  32. * Get cities for a state
  33. * @param stateId
  34. * @returns Observable
  35. */
  36. public getCities(stateId: number): Observable<any> {
  37. return this.http.get<any>(this.BASE_URL + 'getcity&state_id=' + stateId);
  38. }
  39. }
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root',
})
export class DropdownService {
  // Update your API path here
  private BASE_URL = environment.apiUrl;
  constructor(private http: HttpClient) {}

  /**
   * Fetch All Countries
   * @returns Observable
   */
  public getCountries(): Observable<any> {
    return this.http.get<any>(this.BASE_URL + 'getcountry');
  }
  /**
   * Get states for a country
   * @param countryId
   * @returns Observable
   */
  public getStates(countryId: number): Observable<any> {
    return this.http.get<any>(
      this.BASE_URL + 'getstate&country_id=' + countryId
    );
  }
  /**
   * Get cities for a state
   * @param stateId
   * @returns Observable
   */
  public getCities(stateId: number): Observable<any> {
    return this.http.get<any>(this.BASE_URL + 'getcity&state_id=' + stateId);
  }
}

environment.ts

  1. export const environment = {
  2. production: false,
  3. apiUrl:
  4. 'http://localhost/projects/codingbirds_/country-state-city-dropdown-api/index.php?endpoint=', // you can change your localhost path for api.
  5. };
export const environment = {
  production: false,
  apiUrl:
    'http://localhost/projects/codingbirds_/country-state-city-dropdown-api/index.php?endpoint=', // you can change your localhost path for api.
};

environment.prod.ts

  1. export const environment = {
  2. production: true,
  3. apiUrl:
  4. 'https://demo.codingbirdsonline.com/country-state-city-dropdown-api/index.php?endpoint=',
  5. };
export const environment = {
  production: true,
  apiUrl:
    'https://demo.codingbirdsonline.com/country-state-city-dropdown-api/index.php?endpoint=',
};

4. Mock the REST APIs

Since our frontend work is done, now we need to set up the backend APIs, No No… You don’t need to create APIs, I have already done it for you. Download it from here & setup in locally or on your server.

Or if you do not want to set it up, you can keep the same apiUrl into your environment.ts file as in environment.prod.ts

I already deployed these REST APIs to my server. You can access these APIs by appending these endpoints to the base URL https://demo.codingbirdsonline.com/country-state-city-dropdown-api/

Here are endpoints, params & methods for your reference.

API endpointParametersMethod Description
/index.php?endpoint=getcountry..GETReturn the countries in json format
/index.php?endpoint=getstate&country_id={countryId}country_idGETReturn the states for a country id in json format
/index.php?endpoint=getcity&state_id={stateId} state_id GETReturn the cities for a state id in json format

5. Run the code!!

So All the coding part is done, Now it is time to see the actual efforts we made to create Hierarchical location dropdowns in Angular. Save all the files and navigate to http://localhost:4200/ to see the output. You will see something like this.

Country State City Dropdowns in Angular Output GIF

Source Code & Demo

You can download the full 100% working source code from here. You check this demo also before starting to code. Watch this YouTube video explaining everything about dependent dropdown in Angular using the Country State City dropdown example.

Conclusion

I hope you learned what I explained in the above steps, If you have any suggestions or any errors, or issues please let me know in the comments, definitely I will try to help.

As I have shown If this code works for you, please leave a nice ❤️ comment so that others can find it useful which always gives me the motivation to create such content.

Keep Reading
By