pre set value for dropdown in angular 2

Question

I have a drop down to select countries from a back-end API call.

code:

this.http.get(SERVER_URL+"/edit/getAllCountry")
    .subscribe((res) => {
        this.countries = res;
    });

this will returns me list of countries from my database.

ill be printing them in html like:

billingPage.html

<select [(ngModel)]="country" (ngModelChange)="countryChanged(country)" >
                            <option *ngFor="let c of countries" [ngValue] = 'c'> {{c.countryName}} </option>
                        </select>

the question is , before coming to this billing.html page I have a selected value for the country. for example I have selected 'USA' and how can I load it in into to the dropdown when the page is loaded.

in the dropdown list 'USA' should be selected when the page loads.

no I need to display the country parsed from previous controller in the billing.html page dropdown list. — Dilakshan Sooriyanathan, Nov 14 '17 at 07:21
The idea is the same. The default value on the next page is the one selected. It's set in the same way. — Daniel B, Nov 14 '17 at 07:26

score 1 · Accepted Answer · answered Nov 14 '17 at 07:33

Try this,

Ts

 selectedcountry:any;

 this.selectedcountry="USA";
 this.http.get(SERVER_URL+"/edit/getAllCountry")
.subscribe((res) => {
    this.countries = res;        
});

it is custom example .Once we selected and save into DB means, call another API which we saved the values, like below example:

 this.http.get(SERVER_URL+"/edit/getselectedCountry")
.subscribe((data) => {
    this.selectedcountry = data;        
});

billingPage.html

  <select [(ngModel)]="selectedcountry"  >
  <option *ngFor="let c of countries" [selected]="selectedcountry==c.countryName" value="{{c.countryName}}"> {{c.countryName}}
  </option>

works perfectly ty :) – Dilakshan Sooriyanathan Nov 14 '17 at 07:43 — Dilakshan Sooriyanathan, Nov 14 '17 at 07:43

pre set value for dropdown in angular 2

1 Answers1