CODEWITHSUNDEEP
javascriptangulartypescript
Prince Pandey
Prince Pandey

Reputation: 193

How to map and bind data in angular 2?

I have two lists, one is the city list and another country list. suppose if I click Delhi (in city list). india will be auto-selected. country list is coming from the backend. here is an uncompleted demo. demo link give me some advice on what should be the approached or how can be it achieved. screenshot

Upvotes: 2

Views: 282

Answers (1)

hjbello
hjbello

Reputation: 651

I would do the following. Instead of creating list city1 and city2 containing only the names of the cities, I would create a interface to store the names of the city and the countries, so you can use the country later to select the other list.

export interface City {
cityName: string;
country: string;
}

Then I would create two lists like this (before the constructor):

  cityList1: City[] = [{cityName: 'delhi',country:'India'},
    {cityName: 'rudrapur',country:'India'},
    {cityName: 'kanpur',country:'India'}];
  selectedCity1: City = this.cityList1[0];
  countrySelectedInList1: string;

  cityList2: City[] = [{cityName: 'washington DC',country:'USA'},
    {cityName: 'New york',country:'USA'}];
  countrySelectedInList2: string;

Now you have also the country. Then In your app.component.html I would change you options to:

<div class="container row">
                <div class="col-sm-6">
                  <p align="left" style="margin-left: -25px;" class="col-sm-3" >City1:</p>
                  <select class="col-sm-3" (ngModelChange)="changeCity1($event)" 
                  [style]="{'width':'140px'}" [ngModel]="selectedCity1">
                    <option  *ngFor="let city of cityList1" [ngValue]="city">{{city.cityName}}</option>
                  </select>
                </div>
              </div>
              <div class="container row">
                <div class="col-sm-6">
                  <p align="left" style="margin-left: -25px;" class="col-sm-3" >City2:</p>
                    <select class="col-sm-3" (ngModelChange)="changeCity2($event)" 
                  [style]="{'width':'140px'}" [ngModel]="selectedCity2">
                    <option  *ngFor="let city of cityList2" [ngValue]="city">{{city.cityName}}</option>
                  </select>
                </div>
              </div>

And finally also in app.component.ts you will need the following functions to be executed when the options list is clicked and changed:

changeCity1(value:City){
    this.countrySelectedInList1 = value.country;
  }
  changeCity2(value:City){
    this.countrySelectedInList2 = value.country;
  }

So Now you have the countries stored in the variables this.countrySelectedInList1 and this.countrySelectedInList2. So you will only need to change the selected country using that variables. You could do that using your variable named selectedWindingProtection inside the functions that I write you above and the variables countrySelectedInList1 and countrySelectedInList2 (I am not being very specific here because the code you posted in StackBlitz is not complete at this point).

Upvotes: 2

Related Questions