Angular 16 Bind Select Element to Object Tutorial

Angular is a handy UI framework that helps frontend developers to build web applications rapidly. It offers a developer-friendly environment to create awesome apps.

While creating Angular apps, newbie developers meet various issues; one such problem is binding select elements to objects.

In this short post, we will demystify how to bind Select element to Object in Angular using ngValue and ngFor directives.

The ngValue directive is used to bind the select element to the object; it is added to the option property inside the select HTML element. On the other hand, we receive an array of data to iterate over every element in the array; we use the ngFor directive.

How to Bind Select Element to Object in Angular

• Step 1: Install Angular CLI
• Step 2: Download Angular App
• Step 3: Add Forms Module AppModule
• Step 4: Update TypeScript File
• Step 5: Integrate Select in View
• Step 6: Run Angular Server

Install Angular CLI

To understand the event binding concept more precisely, we are going to create an angular app.

Make sure to have the Angular CLI installed on your system using given command.

npm install -g @angular/cli

Download Angular App

Next, task is to download a new angular app, here is how you can manifest the new angular app on your device.

ng new ng-demo

Head over to the app folder.

cd ng-demo

Add Forms Module AppModule

In this angular ngModel bind to object example we need to import the FormModule in AppModule class, hence add given code to app/app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Update TypeScript File

We created the Data array object using the DataObj interface, this object has to be added to the app.component.ts file.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  chosenObj: any;
  Data: DataObj[] = [
    { id: 'one', name: 'Food' },
    { id: 'two', name: 'Travel' },
    { id: 'three', name: 'Education' },
    { id: 'four', name: 'Goverment' },
  ];
}
interface DataObj {
  id: string;
  name: string;
}

Integrate Select in View

To bring the select in view mode, open the file and add given code to the app.component.html file.

<div class="container mt-5 text-center">
  <h2 class="mb-3">Angular Bind Select Element to Object Example</h2>
  <select [(ngModel)]="chosenObj" class="form-control">
    <option *ngFor="let data of Data" [ngValue]="data">
      {{ data.name }}
    </option>
  </select>
  <div class="d-flex mt-5">
    {{ chosenObj | json }}
  </div>
</div>

Run Angular Server

To run an Angular application in the browser, you must execute the Angular CLI command, where -o attribute opens the app automatically on the browser.

ng serve --open

http://localhost:4200

Conclusion

In this guide, we have learned how to use ngFor and ngValue properties to bind Select element to object in the Angular app.