How to bind Select element to object in Angular with examples

bind select element to object

To bind select element to object in angular use [ngValue] property.

We will go through an example to understand it further. we will create a component called BindSelectToObjectComponent in our angular project.

   selector: 'app-bindselecttoobject',
   templateUrl: './bindselecttoobject.component.html',
   styleUrls: ['./bindselecttoobject.component.scss'],
export class BindSelectToObjectComponent{
  languageObjects : language[];
  selectedObject : language;

  constructor() { 
    this.languages = [
      {id: 1, name: "Angular"},
      {id: 2, name: "Typescript"},
      {id: 3, name: "Javascript"},
      {id: 4, name: "Java"},
      {id: 5, name: "DotNet"}

interface language{

I created an interface object called language which has id and name properties.

In component ts file added a variable selectedObject which of object language and will bind it to select element using [ngModel].

And another variable languageObjects which contains list of objects which is used to display select options using [ngValue].

<h1>Bind select Element to Object</h1>
<select [(ngModel)]="selectedObject">
  <option *ngFor="let lang of languageObjects" [ngValue]="lang">

{{selectedObject | json}}

Now the selectedObject contains language object itself.

And we can display it using json pipe as shown below.

bind select element to object

bind select element to object

☝ ✍ Angular Wiki ✍☝
Get a short & sweet Angular tutorials delivered to your inbox every couple of days. No spam ever. Unsubscribe any time.
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.