Sometimes, we want to bind select element to object in Angular.
In this article, we’ll look at how to bind select element to object in Angular.
How to bind select element to object in Angular?
To bind select element to object in Angular, we can assign our object to [ngValue]
.
For instance, we write
<select [(ngModel)]="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{ c.name }}</option>
</select>
to bind our selected drop down value to selectedValue
with [(ngModel)]
.
Then we render the options with *ngFor
.
And we assign the value of each option to an object with
[ngValue]="c"
Then selectedValue
would be the object selected from the drop down.
Conclusion
To bind select element to object in Angular, we can assign our object to [ngValue]
.