How to bind select element to an object in Angular ?

Last Updated : 24 Apr, 2025

AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of any value, function, or feature that an application needs. A service is a class with a narrow and well-defined purpose. In this article, we will see how to bind a select element to an object in AngularJS. The process of binding a select element to an object helps in associating the selected value with a property in our component class.

Steps to bind select element to object: The below steps will be followed for binding the select element to the object in Angular:

Step 1: Create a new Angular project and install the necessary dependencies

ng new my-app
cd my-app

Step 2: Create a new Angular component

ng generate component my-component

This will create a new directory called "my-component" in your project's "src/app" directory, along with the necessary files for an Angular component.

Step 3: Create an interface or class to define the structure of the options

export interface Option {
  value: string;
  displayText: string;
}

Step 4: Define an array of options in your component

export class MyComponentComponent {
  options = [
    { id: 1, name: 'Java' },
    { id: 2, name: 'C++' },
    { id: 3, name: 'Python' }
  ];
  selectedOption: any;
}

Step 5: Use the ngFor directive to generate the options in the select element

<select [(ngModel)]="selectedOption">
  <option *ngFor="let option of options" 
             [ngValue]="option">
             {{option.name}}
  </option>
</select>

Step 6: Use the selected option in your component

<p>You selected: {{ selectedOption | json }}</p>

We will understand the above concept with the help of suitable approaches & will understand its implementation through the illustration.

Approach 1: In this approach, we are using the ngValue directive to bind the entire object to the value attribute of the option element. This approach requires a compareWith function to be defined to properly compare the selected option with the options in the array.

Example 1: Below example demonstrates the binding of the select element to an object in angular.

app.module.ts

JavaScript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MyComponentComponent } 
    from './my-component/my-component.component';

@NgModule({
    declarations: [
        AppComponent,
        MyComponentComponent
    ],
    imports: [
        BrowserModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

my-component-component.html

HTML

<h2 style="color: green">
    GeeksforGeeks
</h2>
<select [(ngModel)]="selectedOption">
    <option *ngFor="let option of options" 
            [ngValue]="option">
        {{ option.name }}
    </option>
</select>
<p>
    You selected: {{ selectedOption | json }}
</p>

my-component-component.ts

JavaScript

import { Component } from '@angular/core';

@Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
})

export class MyComponentComponent {
    options = [
        { id: 1, name: 'Java' },
        { id: 2, name: 'C++' },
        { id: 3, name: 'Python' }
    ];
    selectedOption: any;
}

app.component.html

HTML

<app-my-component></app-my-component>

Output:

Approach 2: In this approach, we are using the value attribute of the option element to bind the entire object to the selectedOption property. This approach does not require a compareWith function and is simpler to set up.

Example 2: This is another example that demonstrates the binding of the select element to an object in Angular.

app.module.ts

JavaScript

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SelectObjectComponent } 
    from './select-object/select-object.component';

@NgModule({
    declarations: [
        AppComponent,
        SelectObjectComponent
    ],
    imports: [
        BrowserModule,
        FormsModule 
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

select-object.component.html

HTML

<h2>My Component</h2>

<select [(ngModel)]="selectedOptions">
    <option *ngFor="let option of options" 
            [value]="option.name">
      {{ option.name }}
      </option>
</select>
<p>
      Selected Option: {{ selectedOptions | json }}
</p>

select-object-component.ts

JavaScript

import { Component } from '@angular/core';

@Component({
    selector: 'app-select-object',
    templateUrl: './select-object.component.html',
    styleUrls: ['./select-object.component.css']
})

export class SelectObjectComponent {
    options: any = [
        { id: 1, name: 'HTML' },
        { id: 2, name: 'CSS' },
        { id: 3, name: 'Javascript' },
        { id: 4, name: 'MongoDb' }
    ];
    selectedOptions: any
}