How to Bind Select Element to Object in Angular?

In this article, let us look into how to implement binding select element to object in Angular. In this article, we will implement an Angular <select> element bind to an object.

You will learn how to bind <select> elements to objects in angular.

The implementation shown below would work with all the versions of Angular 5 and above (Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular 12, and Angular 13).

Component

import { Component } from '@angular/core';
  
interface category{
   id:number;
   name:string;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  
  selectedObject : category;
  categories = [
    {id: 1, name: 'JQuery'},
    {id: 2, name: 'Angular'},
    {id: 3, name: 'Vue'},
    {id: 4, name: 'React'}
  ]
}

HTML

<select [(ngModel)]="selectedObject">
  <option *ngFor="let cat of categories" [ngValue]="cat">
       {{cat.name}}
   </option>
</select>
  
{{selectedObject | json}}