As you’ve learned the property binding and event binding, now we’re good to go with two-way data binding.
What Is Two-Way Data Binding in Angular?
The main disadvantage of one-way data binding is that it doesn’t get reflected in the TypeScript code when we make any change in the view. As a solution to this problem, Angular provides two-way data binding.
For example, when working with Form’s Module, the View and Class must always be in sync. Hence two-way data binding allows us to update the property and at the same time to display it as well. For two-way data binding Angular provides a cool directive called ngModel directive.
Syntax of ngModel
[(ngModel)] = "property_name"
NOTE: To use ngModel, we’ve to import FormsModule from @angular/forms in the app-routing.module.ts file and export it.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {FormsModule} from '@angular/forms'
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule,FormsModule]
})
export class AppRoutingModule { }Example
Now let’s see how two-way data binding works in Angular.
Step 1: Let’s take an input field where we’ll be entering some text.
<input type="text" [(ngModel)]="input">
Step 2: Let’s create an empty property called input in the TypeScript file to store the input data.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-app';
input = ""
}Step 3: Now, let’s enter some data and display it in the View using Interpolation.
<h3>{{input}}</h3>Output:
Here the Class and View are in sync. This is because the data we’re giving to the input field is also displayed simultaneously. Hence two-way data binding occurring.
Conclusion
Naturally, we use ngModule when we’re working with Angular Forms. However, we’ll be learning Angular Reactive Forms in detail in a different module where you’ll see more use of ngModel.
We hope this article was well enough to clear your concepts on two-way data binding in Angular. In the upcoming articles, you’ll learn some more directives in Angular.
Read Next: Angular ngFor Directive
