How to Bind Select Element to Object in Angular 14

In this simple tutorial, you will get to know how to bind a select dropdown element value to an object in the Angular app.

Angular is a great framework that helps developers quantify the application development speed using ngValue and ngFor directives.

We will create a basic angular app using the angular cli tool, in which we will inject the FormsModule, which will allow us to work with a select dropdown component.

The ngFor loop extracts the collection or array value, whereas ngValue will enable us to set the data type object values in the options property.

Angular Bind Select Dropdown Element Value to Object Example

  • Step 1: Install Angular App
  • Step 2: Import FormsModule
  • Step 3: Set Data in TypeScript
  • Step 4: Create Select Dropdown
  • Step 5: Start Angular App

Install Angular App

Angular CLI tool is an imperative tool as far as angular web development is concerned. If you haven’t installed it, use the given command to set it up on your machine.

npm install -g @angular/cli

Type the command on the console, then hit enter to formulate a new angular app.

ng new angular-blog

Navigate to the app’s root folder.

cd angular-blog

Import FormsModule in Main Module

The select dropdown is a form element; the form component only works when you add FormsModule in the AppModule class.

Hence import the FormsModule in the app.module.ts file as given below.

import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [],
  imports: [FormsModule],
  providers: [],
  bootstrap: [],
})

export class AppModule {}

Set Data in TypeScript

Open the app.component.ts file, define the array of objects with couple of other variables and interface in this file.

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

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

export class AppComponent {
  selectObj: any;
  Arr: ArrObj[] = [
    { id: 'Badger', name: 'Badger' },
    { id: 'Camel', name: 'Camel' },
    { id: 'Clam', name: 'Clam' },
    { id: 'Coyote', name: 'Coyote' },
    { id: 'Dinosaur', name: 'Dinosaur' },
    { id: 'Eagle', name: 'Eagle' },
  ];
}

interface ArrObj {
  id: string;
  name: string;
}

Create Select Dropdown

Navigate to app.component.html template, ideally this file holds the code which is responsible for view part of the app.

Therefore to create the select dropdown component we have to define the following HTML code into the angular HTML template.

<div>
  <select [(ngModel)]="selectObj">
    <option *ngFor="let arr of Arr" [ngValue]="arr">
      {{ arr.name }}
    </option>
  </select>

  <p>
    {{ selectObj | json }}
  </div>
</p>

Start Angular App

To execute the angular application server you will need to run the ng serve command with –o tag.

ng serve --o

The –o attribute stands for open, hence it serves angular application on the browser.

http://localhost:4200

How to Bind Select Element to Object in Angular

Summary

In this quick guide, we have seen how to bind array object values to select dropdown component in an Angular app using built-in angular ngValue, ngModel, and ngFor directives.