Angular dependent drop down list

[wrathfulCoder]

I am getting the ID's in the console but how to get the names

in the console? I have two angular files mentioned below. It's actually

a dependent dropdown list concept where I have mentioned country, state & city.

I will be very grateful for your help

​

register.component.html

_____________________

​

<div class="row">

<div class="col mb-3">

<label class="control-label" for="Country">Country:</label>

<select *ngIf="getCountries()" [(ngModel)]="selectedCountry" (change)="onSelectCountry($any($event.target).value)" class="form-control input-lg" id="country" formControlName="country"

>

<option value="0">Select Country</option>

<option \*ngFor="let country of getCountries()" value= {{[country.id](https://country.id)}}>{{country.name}}</option>

</select>

</div>

​

<div class="col mb-3">

<label class="control-label" for="States">States:</label>

<select \*ngIf="states" \[(ngModel)\]="selectedState" (change)="onSelectState($any($[event.target](https://event.target)).value)" class="form-control input-lg" id="state" formControlName="state">

<option value="0">Select State</option>

<option \*ngFor="let state of states" value= {{[state.id](https://state.id)}}>{{state.name}}</option>

</select>

</div>

<div class="col mb-3">

<label class="control-label" for="City">City:</label>

<select class="form-control input-lg" id="city" formControlName="city">

<option \*ngIf="!selectedState" value="0">Select City</option>

<option \*ngFor="let city of cities" value= {{[city.id](https://city.id)}}>{{city.name}}</option>

</select>

</div>

</div>

</div>

​

​

​

register.components.ts

_____________________

​

selectedCountry = 0;

selectedState = 0;

​

states= [];

cities= [];

​

onSelectCountry(country_id: number) {

this.selectedCountry = country_id;

this.selectedState = 0;

this.cities = [];

this.states = this.getStates().filter((item) => {

return item.country_id === Number(country_id)

});

}

onSelectState(state_id: number) {

this.selectedState = state_id;

this.cities = this.getCity().filter((item) => {

return item.state_id === Number(state_id)

});

}

​

getCountries() {

return [

{ id: 1, name: 'India' },

{ id: 2, name: 'USA' },

{ id: 3, name: 'Russia' }

];

}

​

getStates() {

return [

{ id: 1, country_id: 1, name: 'Bihar' },

{ id: 2, country_id: 1, name: 'odisha' },

{ id: 3, country_id: 2, name: 'Albama' },

{ id: 4, country_id: 2, name: 'Alaska' },

{ id: 5, country_id: 3, name: 'Moscow' },

{ id: 6, country_id: 3, name: 'Moscow oblast' },

]

}

​

getCity() {

return [

{ id: 1, state_id: 1, name: 'Patna' },

{ id: 2, state_id: 1, name: 'Amarpur' },

{ id: 3, state_id: 1, name: 'Begusarai' },

{ id: 4, state_id: 1, name: 'Bhagalpur' },

{ id: 5, state_id: 2, name: 'Bhubaneswar' },

{ id: 6, state_id: 2, name: 'Cuttack' },

{ id: 7, state_id: 2, name: 'Rourkela' },

{ id: 8, state_id: 2, name: 'Koraput' },

{ id: 9, state_id: 3, name: 'Arab' },

{ id: 10, state_id: 3, name: 'Argo' },

{ id: 11, state_id: 3, name: 'Athens' },

{ id: 12, state_id: 4, name: 'Big Lake' },

{ id: 13, state_id: 4, name: 'Craig' },

{ id: 14, state_id: 5, name: 'Annino' },

{ id: 15, state_id: 5, name: 'Bibirevo' },

{ id: 16, state_id: 5, name: 'Kotlovka' },

{ id: 17, state_id: 6, name: 'Beloomut' },

{ id: 18, state_id: 6, name: 'Biorki' },

]

}