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.