[value] vs [ngValue] in select option
Angular provides the NgSelectOption Directive, which contains two inputs: value and ngValue
Use [ngValue] if you are building a select and you need to bind the entire object to the selects option
<select name="player-select" [(ngModel)]="selectedPlayer">
<option
*ngFor="
let player of [
{ id: 1, name: 'Michael Jordan' },
{ id: 2, name: 'Kobe Bryant' },
{ id: 3, name: 'Lebron James' }
]
"
[ngValue]="player"
>
{{ player.name }}
</option>
</select>
<pre>
{{ selectedPlayer | json }}
<!-- { id: 1, name: 'Michael Jordan' } -->
</pre>
If you only need to bind a string value, you can use [value]:
<select name="player-select" [(ngModel)]="selectedPlayer">
<option
*ngFor="
let player of [
{ id: 1, name: 'Michael Jordan' },
{ id: 2, name: 'Kobe Bryant' },
{ id: 3, name: 'Lebron James' }
]
"
[value]="player.id"
>
{{ player.name }}
</option>
</select>
<pre>
{{ selectedPlayer | json }}
<!-- "1" -->
</pre>
Support
If you enjoyed this tip and found it useful, consider buying me a coffee. Thanks in advance!
![Buy Me a Coffee at ko-fi.com](/images/kofi.webp)