Simple Example of One Way & Two Way Binding in Angular 8

In Angular application, we create Variables or form fields on the component page and bind the variables or form fields on the View page to display value or also we can modify those variables or form fields  at the View page and update it back to Component, this binding is implemented in two ways, first is "One Way Binding" and another is "Two Way Binding", following article explain about One Way Binding and Two Way Binding with examples:

One Way Binding: 

In this, we are going to show you how we can bind the properties in One Way binding which is also known as Property Binding. One way binding binds the property from Component to the View. But the problem here is if you modify the value of the same property on html page, then it will not update it at the Component level, the component value of this property will remain same. Where we can use the One way binding:

• Showing values received from database and loaded into a property or Model declared at the component level

        txtName: string= "Test 1";

• Result of any calculation done dynamically at component level can be updated on View side by just assigning latest value to this property at component level, as shown below:

      this.txtName = "Test 2";

How to use One way binding:

Approach 1: If you are just showing the property value in <div> as shown below, then use the following syntax:

<div>Name is: {{txtName}}</div>

Approach 2: If you are using Text-box and wants to show the value of this property in a Text-box, then you can use the following syntax to achieve this:

<input type="text" [ngModel]="txtName" />

In the above syntax, we have only used square bracket which is a way to achieve One way data binding. If you also add round bracket along with square bracket, then it becomes two-way data binding.

Two Way Binding:

In this, the value of a property updated from component will reflect on view and vice versa. As shown in below example, two way binding will be used for a property which is mapped to a Text-box or any other type of input field. This way any modification to a Text-box value will automatically get reflected to all the locations where this property is shown or used.

<input type="text" [(ngModel)]="txtName" />

As shown in above syntax, we have to enclosed ngModel in square bracket and round bracket both. This makes the above Text-box two-way data binding input field.

Simple example of a complete One-way and two-way data binding in Angular 8:

Following is the sample-data-binding.component.ts file data:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-sample-data-binding',
  templateUrl: './sample-data-binding.component.html',
  styleUrls: ['./sample-data-binding.component.css']
})
export class SampleDataBindingComponent implements OnInit {
  constructor() { }
  txtName: string= "Test 1";
  ngOnInit() {
  }
  modifyName(){
    this.txtName = "Test 2";
  }
}

Following is the sample-data-binding.component.html file data:

<div style="margin:20px;">
<div>Name is: {{txtName}}</div><br>
<input type="text" [ngModel]="txtName" /><br><br>
<input type="text" [(ngModel)]="txtName" /><br><br>
<input type="button" (click)="modifyName()" value="Modify Name">
</div>

Result of the above code is:

As per above example, when we load this page, so on load, it will show "Test 1" as value shown on all the places, when we modify the value of a first Text-box, then it will just modify value of the same Text-box, it will not update the values on all the location because it is One-Way data binding, but if you modify second Text-box which is Two-Way data binding, then it will update this field on all the locations on View and on Component.