Set Selected Option Dynamically Using Angular 2+

Question

I'm creating a <select> dropdown using HTML5 and angular. I need the selected <option> to be determined dynamically via angular. If this were to be a static dropdown, it could be done as such:

<select>
  <option value="1" selected>1</option>
  <option value="2">2</option>
</select>

A typical dynamic value could be determined as such (assuming val1 and val2 are declared in the component):

<select>
  <option [value]="val1">1</option>
  <option [value]="val2">2</option>
</select>

But given that the select attribute has no ="" at the end, how could one assign it dynamically? In general, how could one assign such a value in angular? Especially since even if a value is provided to selected, it's simply ignored. So for example, <option selected="false"> would be rendered the same as <option selected>.

nmg49 · Accepted Answer · 2018-09-04 17:36:45Z

2

I eventually figured this one out on my own. The answer turns out to be pretty simple.

(assume that value is declared in the component)

<select>
  <option value="1" [selected]="value == 1">1</option>
  <option value="2" [selected]="value == 2">2</option>
</select>

I didn't think this would work, since in plain HTML selected="false" would still render the same as selected. However, it makes sense if you think about it. Adding the [] brackets tells angular to compute the value at compile time. And if the value is falesy, it will simply never make it into the DOM! So from HTML's perspective, <option value="myValue" [selected]="false"> will translate as <option value="myValue">.

answered Sep 4, 2018 at 17:36

nmg49

1,4061 gold badge13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set Selected Option Dynamically Using Angular 2+

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related