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


import { Component } from '@angular/core';
interface category{
  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)


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

Leave a Reply

Scroll to Top