CODEWITHSUNDEEP
c#asp.net-mvcangulartypescript
LittleDragon
LittleDragon

Reputation: 2437

angular 2 select option with object value

im getting the list of object value from API and inside the object there has a property for identify the selected item i am able to bind the items list to view

here is the json data

enter image description here

here is the my code :

   <select class="form-control"  name="Underwriter">
 <option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value" >{{underwriter.text}}</option>
  </select>

any way to make the selected item ?

Upvotes: 2

Views: 1327

Answers (2)

AVJT82
AVJT82

Reputation: 73387

You can add just a [selected] to your select and check which underwriter has property selected as true.

like so:

 <select class="form-control" (change)="onChangeunderwriter($event)" name="Underwriter">
     <option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value" [selected]="underwriter.selected == true">{{underwriter.text}}</option>
 </select>

So just add: 

[selected]="underwriter.selected == true"

A simplified plunker

Upvotes: 2

jason.kaisersmith
jason.kaisersmith

Reputation: 9650

In your question you say you want to "make" the selected item, which I assume means set it. This is how I have done it, but there might be other better ways.

You need to set the [attr.selected] in the option tag

 <select class="form-control"  name="Underwriter">
 <option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value"  [attr.selected]="underwriter.text === underwriterTextString ? true: null">{{underwriter.text}}</option>
  </select>

Then it your code you need to set underwriterTextString when the WebService API returns a result.

If underwriter.text does not work then try underwriter.value

However, in your comment below you now say that you want to "get" the selected item. This can be done by using the change event in the select tag

 <select class="form-control" (change)="onChangeunderwriter($event)" name="Underwriter">
     <option *ngFor="let underwriter of policyModel?.underwriterList" [ngValue]="underwriter.value"  [attr.selected]="underwriter.text === underwriterTextString ? true: null">{{underwriter.text}}</option>
      </select>

Then in your code your need something like this;

onChangeunderwriter(event) {

//the value will be set in event.target.value;


  }

Upvotes: 0

Related Questions