cascading dropdown in angular using typescript

Question

I am getting the response from three diff APIs in angular. all the APIs are called in ngOnInit since we have dependency on each other. How to make cascading dropdown like if i selected the 'India' from first drop down then all the city of india should come in second dropdown and when i select delhi from second dropdown then all the values of delhi should come in third dropdown

API 1 response

{id: 0, name: "India"}
{id: 1, name: "US"}

API 2 response

{id: 0, name: "India", city: "delhi"}
{id: 1, name: "US", city: "NYK"}
{id: 2, name: "India", city: "chennai"}
{id: 3, name: "US", city: "WDC"}
{id: 4, name: "India", city: "mumbai"}
{id: 5, name: "India", city: "NewJs"}

API 3 response

{id: 0, name: "block1", dist: "delhi"}
{id: 1, name: "block2", dist: "NYK"}
{id: 2, name: "block3", dist: "Chennai"}
{id: 3, name: "block4", dist: "delhi"}
{id: 4, name: "block5", dist: "WDC"}
{id: 5, name: "block6", dist: "NewJs"}
{id: 6, name: "block7", dist: "mumbai"}
{id: 7, name: "block8", dist: "delhi"}
{id: 8, name: "block9", dist: "NYK"}

component.ts

export class CreateInfraRequestComponent implements OnInit {
 Country:any;
 City:any;
 Block:any;
 selectedCountry:any;
 selectedCity:any;
 selectedBlock:any;
 constructor(private infraService : InfraRequestService){  };
 ngOnInit(): void {
    this.getAllCountry();
    this.getAllCity();
    this.getAllblock();
}
getAllCountry (){
  this.infraService.getAllInfraRequest("apiUrlForCountyr").subscribe((data)=>{
  this.Country=data;
    console.log(data);
  });
}

getAllCity(){
    this.infraService.getAllInfraRequest("apiUrlForCity").subscribe((data)=>{
    this.City=data;
     console.log(data);
    });    
}
getAllblock(){
  this.infraService.getAllInfraRequest("apiUrlForBlock").subscribe((data)=>{
  this.Block=data;
    console.log(data);
  });    
}

}

component.html

<select [(ngModel)]="selectedCountry">                   
        <option *ngFor="let country of Country" [value]="country.name">
          {{country.name}}
        </option>            
    </select>
  <select [(ngModel)]="selectedCity">                   
        <option *ngFor="let city of City" [value]="city.name">
          {{city.name}}
        </option>            
    </select>
  <select [(ngModel)]="selectedBlock">                   
        <option *ngFor="let block of Block" [value]="block.name">
          {{block.name}}
        </option>            
    </select>

You're using selectedCountry, selectedCity, selectedBlock in component.html and they have no instances in component.ts. Please edit your code accordingly — Kartik Dolas, May 23 '21 at 04:43
@KartikDolas thanks for pointing, code edited. could please explain know how can i achieve above problem statement ? — New Developer, May 23 '21 at 06:03

score 0 · Answer 1 · answered May 23 '21 at 08:09

0

One way to solve your problem will be to listen to changes with a change event. What you want to do is

Trigger a change event each time a selection change happens with:

<select [ngModel]="selectedCountry" (ngModelChange)="onChange($event)" name="sel2">
{country.name}}
Then in ts file get access to value with - and assign it to the next select item
```
onChange(newValue) {
console.log(newValue);
this.City = newValue;
}
```

This post can help you further: How can I get new selection in "select" in Angular 2?

answered May 23 '21 at 08:09

usalin

141
1
7

i'm able to get the selected value from first dropdown, but the problem is how to filter the data of second dropdown based on first dropdown selection – New Developer May 23 '21 at 08:40
let's say that user selected a country option. In city select, you bind value to select options using City array right? Then loop over it with *ngFor="let city of City". In OnChange() function triggered from country, you can filter the City array with const filteredResult = this.City.filter(city=> city.value == value); and assign the result to the City array. – usalin May 23 '21 at 09:00

cascading dropdown in angular using typescript

1 Answers1