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.