How To Add Cascading Dropdown In Angular

• For Cascading dropdown add below code In app.component.ts :

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  countryData: any = [
    { CountryName: 'Australia', CountryId: '2' },
    { CountryName: 'United States', CountryId: '1' }
  ]
  statData: any = [
    { StateName: 'New York', CountryId: '1', SateId: '101' },
    { StateName: 'Virginia ', CountryId: '1', SateId: '102' },
    { StateName: 'Tasmania ', CountryId: '2', SateId: '105' }
  ]
  cityData: any = [
    { CityName: 'Albany', SateId: '101', CityId: '201' },
    { CityName: 'Beacon ', SateId: '101', CityId: '202' },
    { CityName: 'Emporia', SateId: '102', CityId: '206' },
    { CityName: 'Hampton ', SateId: '102', CityId: '205' },
    { CityName: 'Hobart', SateId: '105', CityId: '213' },
    { CityName: 'Launceston', SateId: '105', CityId: '214' }
  ]


  states: Array<any> = [];
  cities: Array<any> = [];


  changeCountry(country: any) {
    this.states = this.statData.filter((x: any) => x.CountryId == country);
    this.cities = []
  }

  changeState(state: any) {
    this.cities = this.cityData.filter((x: any) => x.SateId == state);
  }

  getCountryName(id: any): string {
    let countryName = this.countryData.filter((x: any) => x.CountryId == id)[0].CountryName;
    return countryName;
  }
  getStateName(id: any): string {
    let StateName = this.statData.filter((x: any) => x.SateId == id)[0].StateName;
    return StateName;
  }
  getCityName(id: any): string {
    let CityName = this.cityData.filter((x: any) => x.CityId == id)[0].CityName;
    return CityName;
  }
}

• Now add below code in app.component.html :

<section class="container w-75">
    <h1 class="text-center">Cascading DropDown In Angular</h1>
    <div class="col">
        <label class="form-label">Country</label>
        <select class="form-control" formControlName="country" #country (change)="changeCountry(country.value)">
      <option selected disabled value="">--Choose Country--</option>
      <option *ngFor="let country of countryData" [value]="country.CountryId">{{country.CountryName}}</option>
  </select>
    </div>

    <div class="row">
        <div class="col">
            <label class="form-label">State</label>
            <select class="form-control" formControlName="state" #state (change)="changeState(state.value)">
      <option selected value="">--Choose State--</option>
      <option *ngFor="let state of states" [value]="state.SateId" name="state">{{state.StateName}}</option>
  </select>
        </div>
        <div class="col">
            <label class="form-label">City</label>
            <select class="form-control" formControlName="city">
      <option selected value="">--Choose City--</option>
      <option *ngFor="let city of cities" [value]="city.CityId" name="city">{{city.CityName}}</option>
  </select>
        </div>
    </div>
</section>

• Now run our code :