Angular 2 - how to get value from select / option
<p>The majority of select / option solutions for Angular 2 work in a way that we return the actual content, not the <code>value</code> attribute. However, since I'm still learning Angular 2, I want to get the actual <code>value</code> attribute on clicking a button. I managed to somewhat solve this issue, but I'm not sure if this is the correct approach. 
Below is the example of how I'd like it to work:</p>

<pre><code>&lt;select #selectedCategory&gt;
    &lt;option *ngFor="#category of categories" [value]="category.id"&gt;{{category.name}}&lt;/option&gt;
&lt;/select&gt;

&lt;button (click)="getValueFromSelect(selectedCategory.value)"&gt;

/* This returns the selected category.name, not the value attribute. */
</code></pre>

<p>The solution above creates the following HTML (note the lack of <code>value</code> attribute on <code>option</code>): </p>

<pre><code>&lt;select _ngcontent-oom-3=""&gt;
  &lt;!--template bindings={}--&gt;
  &lt;option _ngcontent-oom-3=""&gt;stuff 1&lt;/option&gt;
  &lt;option _ngcontent-oom-3=""&gt;stuff 2&lt;/option&gt;
  &lt;option _ngcontent-oom-3=""&gt;stuff 3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>The solution below actually works, however, I need an <code>ngModel</code> in order to make it work.</p>

<pre><code>&lt;select [(ngModel)]="selectedCategory"&gt;
    &lt;option *ngFor="#category of categories" [value]="category.id"&gt;{{category.name}}&lt;/option&gt;
&lt;/select&gt;
&lt;button (click)="getValueFromSelect(selectedCategory.value)"&gt;
/* This returns the value attribute correctly; however, do I really need a ngModel for one value? */
</code></pre>

<p>What is the correct way to approach this situation?</p>

<p>Thank you for your suggestions.</p>