Angular Two Way Data Binding

Angular Two Way Data Binding

In this article, I am going to discuss the Angular Two Way Data Binding with some examples. Let’s directly start with an example. First, consider the below code in the app.component.ts file

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

@Component({
    selector: 'my-app',
    template: `<div>
                    Name : <input [value]='Name'>
                    <br>
                    You entered : {{Name}}
              </div>`
})

export class AppComponent {
    Name: string = 'Pranaya';
}

From the above code, we need to understand two things.

<input [value]=’Name’>: it binds the component class “Name” property to the value property of the input element.

You entered: {{Name}}: The Interpolation displays the value we have in the “Name” property of the Component class on the web page as shown below.

Angular Two Way Data Binding

At the moment if we change the value in the textbox, then that changed value is not reflected in the browser. One way to achieve this is by binding to the input event of the input control as shown below.  Angular Two Way Data Binding At this point, as we start typing in the textbox, the changed value is displayed on the page as shown in the below image.

Angular Two Way Data Binding  So let’s understand what is happening here. Inside this code  

Angular Two Way Data Binding

[value]=’Name’: This property binding flows the data from the component class Name property to element property i.e. value property of the input element.

(input)=’Name = $event.target.value’: This event binding flows data in the opposite direction i.e. from the element to the component class property i.e. “Name

$event – Is exposed by angular event binding and it contains the event data. To retrieve the value from the input element use – $event.target.value.

Name = $event.target.value – This expression updates the value in the Name property of the component class

You entered : {{name}} – This interpolation expression will then display the updated value on the web page.

So, in short, the two-way data binding in Angular is actually a combination of both Property Binding and Event Binding.

To simplify two-way data binding angular has provided with the ngModel directive. So with the ngModel directive, we can rewrite the following line of code

Angular Two Way Data Binding

At this point, if you run the application then you will get the following error

Angular Two Way Data Binding This is because the ngModel directive is in an Angular system module called FormsModule. If you want to use the ngModel directive, then in your root module that is AppModule, you will have to import the FormsModule first. 

Here are the steps to import FormsModule into our AppModule

1. Open app.module.ts file

2. Include the following import statement in it

    import { FormsModule } from ‘@angular/forms’;

3. Also, include FormsModule in the ‘imports’ array of @NgModule

   imports: [BrowserModule, FormsModule]

The complete code of App.Module.ts is shown below.

Angular Two Way Data Binding

With the above changes, now reload the web page and see everything is working as expected.

So here is the syntax for using two-way data binding in Angular

<input [(ngModel)]=’Name’>

In the next article, we are going to discuss the Angular 2 ngFor directive with an example.

SUMMARY:

In this article, I try to explain Angular Two Way Data Binding with some examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *