Set other value other than default value in angular 7 dropdown - angular7

Question

I have a drop-down list where it shows 'US' as a default value which
is right but suppose a user
is from India so Instead of this i want 'India' in the drop-down.If user is from 'US' or any
other country then it shows 'US' in the drop-down.
So i want to store the current location of the user in the drop-down.But
By default it should shows 'US' in the drop-down. If the user is from
India then set 'India' in the drop-down.
Simply if a user is from 'US' or any other country then by default it shows
'US' in the drop-down but if the user is from 'India' then it shows India in
the drop-down.
app.component.ts -
countries = [
{ name: 'USA', id: '0' },
{ name: 'India', id: '1' }
];
public onChange() {
const userCountry = sessionStorage.getItem(this.appConstants.StorageKeys.UserCountry);
if (userCountry !== null || userCountry !== '') {
return userCountry;
console.log(userCountry);
} else {
return this.countries;
}
}
Here userCountry gives the current location of user i.e; India , Us, OR Any
other country that we fetch from the api .
app.component.html
<select (click)="onChange()">
<option *ngFor="let country of countries" [value]="country">{{ country.name }}
</option>
</select>
What should i do in the app.component.html to bind when the current location of the user is
India or any other country.
Also i don't want to use ngModel for binding.
Kindly Please Help!

Answer 1

countries = [
{ name: 'USA' },
{ name: 'India'}
];
public selectedCountry: string = 'India';
<select>
<option *ngFor="let country of countries" [value]="country"
[selected]="country === selectedCountry">
{{ country }}
</option>
</select>
For reactive form use syntax for drodown -
<select>
<option *ngFor="let country of countries" value="{{country }}"
selected="country === {{selectedCountry}}">{{ country }}
</option>
</select>
For Another way of dropdown binding reactive form you can also visit-
Using select controls in a reactive form
The following examples show how to use a select control in a reactive form.
import {Component} from '#angular/core';
import {FormControl, FormGroup} from '#angular/forms';
#Component({
selector: 'example-app',
template: `
<form [formGroup]="form">
<select formControlName="state">
<option *ngFor="let state of states" [ngValue]="state">
{{ state.abbrev }}
</option>
</select>
</form>
<p>Form value: {{ form.value | json }}</p>
<!-- {state: {name: 'New York', abbrev: 'NY'} } -->
`,
})
export class ReactiveSelectComp {
states = [
{name: 'Arizona', abbrev: 'AZ'},
{name: 'California', abbrev: 'CA'},
{name: 'Colorado', abbrev: 'CO'},
{name: 'New York', abbrev: 'NY'},
{name: 'Pennsylvania', abbrev: 'PA'},
];
form = new FormGroup({
state: new FormControl(this.states[3]),
});
}