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'}
  ]
}Code language: TypeScript (typescript)

HTML

<select [(ngModel)]="selectedObject">
  <option *ngFor="let cat of categories" [ngValue]="cat">
       {{cat.name}}
   </option>
</select>
  
{{selectedObject | json}}Code language: HTML, XML (xml)

Leave a Reply

Scroll to Top