How to Bind Select Element to Object in Angular?

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


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

Discover more from BHUTAN IO

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top