Hello Devs,
In this tutorial, we will learn Angular Bind Object to Select Element Example
In this section, we will implement implement a select box bind object in angular 6, angular 7, angular 8 and angular 9
Follow this step by step guide below.
Example:
src/app/app.component.ts
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'}
]
}
src/app/app.component.html
<h1>Binding Select Element to Object in Angular - rathorji.in</h1>
<select [(ngModel)]="selectedObject">
<option *ngFor="let cat of categories" [ngValue]="cat">
{{cat.name}}
</option>
</select>
{{selectedObject | json}}
May this example help you.