I have a dropdown which binds data from database
<select (ngModelChange)="load($event)">
<option *ngFor="let type of types" [ngValue]="type">{{type.Name}}</option>
</select>
On another button click (not the dropdown change event) I get the type.Id which should be bound to this select, show the selected name and hold it for further use. How can I do that.
You should be using two way binding with ngModel
<select [(ngModel)]="selectedElement">
<option *ngFor="let type of types" [ngValue]="type.id">{{type.Name}}</option>
</select>
{{selectedElement |json}}
Onclick of the button you access the selected id using
this.selectedElement.id
Update 1 : If you are looking to change the selected value based on the service response, use the below code,
HTML {{type.Name}}
Component
types:any[]=[
{id:1,Name:'abc'},
{id:2,Name:'abdfsdgsc'}
];
/*item to be preselected should be in the below object which
*is returned by the web service
*/
selectedElement:any= 2;
Updated LIVE DEMO
You could do something like this:
Set the selected if it matches the number you receive:
<select >
<option value="select" disabled>--Select--</option>
<option *ngFor="let type of types" [selected]="type.id == id" [ngValue]="type">{{type.name}}</option>
</select>
And when you receive your number, you set that value to id (or whatever variable you want). Here's a
