Categories
Angular Answers

How to bind select element to object in Angular?

Spread the love

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

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *