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