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].