One-Way and Two-Way Data Binding in Angular

What is DataBinding in Angular Framework?
Databinding is one of the powerful and useful features of Angular. Angular Framework Databinding is used for communication. It is used for transferring data from one component to other components. It is used to communicate between your TypeScript code (your business logic) and the other component which is shown to the users i.e. HTML layout.
Databinding is necessary because as we know the code written in TypeScript when it compiled it converted to javascript. So proper communication is required between the two-component so Databinding is necessary. In this article, you will learn One-Way and Two-Way Data Binding in Angular.

Types of DataBinding:-

In the Angular framework, there are two types of DataBinding. Both have their own importance and they are one of the most important features of the Angular and they are as follows:

  1. One way DataBinding
  2. Two-way DataBinding

One Way DataBinding

One way data binding is simple one-way communication. It is unidirectional. In this either we can bind the data or send the data from a component to view or from view (DOM) to a component in Angular framework. If the value in the component class is changed or modified, that value will not reflect the view i.e to its HTML without the using DataBinding.

In an Angular, there are different techniques of data binding which supports/use one-way data binding to bind the data from one component to its view. Some of these techniques are listed below which follows one-way data binding in Angular

  1. Interpolation Binding
  2. property Binding
  3. Class Binding
  4. Style Binding
  5. Attribute Binding

Interpolation Binding:

Interpolation is a technique that allows the user to bind a value to a UI element. Interpolation uses one-way data binding. Whenever the value changes in the typescript file of the component then automatically value reflects that component’s HTML file. Inside the HTML file we write the variable name inside the double curly braces i.e, {{ }}.

Let’s see one small example to understand the concept of the interpolation.

app.component.ts

import { Component } from "@angular/core";
@Component({
  selector: 'xadminApp',
  template: `
              <div>
              <strong>{{websiteName}}</strong>
               <strong>{{ownerName}}</strong>
              </div>
              `
})

export class AppComponent {
  websiteName: string = "xadmin";
  ownerName:string = "Ashish";
}

In the above example, we can see component data is bind with the view (HTML) page. i.e websiteName and ownerName will display in HTML page.

Property Binding:

Property binding is one of the data binding technique, this deal with the property of the HTML elements and which help to bind values to the properties of HTML elements.
Let’s see a small example to understand the concept of property binding:

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'XadminApp';
  website = 'xadmin';
}

app.component.html

<div class="container">
  <div class="jumbotron">
    <h1>Welcome</h1>
    <h2>{{title}}</h2>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">website</div>
    <div class="panel-body">
      <div>
        <input [value]='website'>
      </div>
    </div>
  </div>
</div>

In the above example, the property of the input field will bind with the component website property. So in the output.

Class Binding
Class binding the technique used to add or remove classes to and from the HTML elements. You can add CSS Classes conditionally to an element, hence creating a dynamically styled element.
The class binding syntax is also like property binding. In property binding, we only specify the element between brackets. But in class binding, it starts with the prefix class, followed by a dot (.), and the name of the class. like class.class-name.

app.component.html

<div>
    <h1 [class.myClass]="isBinding">binding is  true</h1>
    <h1 [class.myClass]="!isBinding"> binding is false value</h1>
    <h1 [class.myClass]="!isBinding"> binding is false value</h1>
 </div>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isBinding: boolean = true;
}

In this case, if  ‘isBinding’ value evaluates to true then it will bind the ‘myClass’ to a class property. If it evaluates to false, then it will not bind the ‘myClass’ to a class property.

Style Binding
Style binding is one of the Data Binding technique and is used to set a style of a view element. We can set inline styles with style binding.
style binding syntax is like property binding. In property binding, we only specify the element between brackets. But in case of style binding, it starts with the prefix class, followed by a dot (.) and the name of the style. You then bind the style value with CSS style name as the style.style-name.

Let’s see the small example to understand the concept:-

app.component.html

<div>
    <span [style.font-size.px]="isBinding? 20 : 12"> binding is true value</span>
    <span [style.font-size.%]="! isBinding : 120 : 30"> binding is false value</span>
  </div>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isBinding: boolean = true;
}

Two-way binding

Two-way binding is one of the data binding technique in which automatic synchronization of data happens between the model and the view. Here, Change reflected both sides instantly. Whenever you change is the typescript file change will reflect the HTML file. Reflection is immediately and automatically. Here the communication in bi-directionally. Model and view are always updated.

Two-way data binding is used by ngModel attributes

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

ngModel is written inside both the combination of square and parentheses bracket.

You have to import FormModule from @angular/forms in app.module.ts file. It is compulsory to import FormModule otherwise you will get Template parse Error. You can refer to the below code:

app.module.ts

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

app.component.html

<div class="container">
  <div class="jumbotron">
    <h1>Welcome</h1>
    <h2>{{title}}</h2>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">website</div>
    <div class="panel-body">
      <div>
   Enter the value  : <input [(ngModel)] ='inputValue'> 
               <br> 
                Entered value is:  {{inputValue}} 
      </div>
    </div>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'XadminApp';
 inputValue: string = '';
}

After running the above code, in the browser, we see an output as input box asking from us to enter the value. After entering the value. The two-way binding will work. Let say you entered xadmin then it will display entered value is xadmin. Bravo! you have learned the concept of the two-way binding.

That’s all from my side on One-Way and Two-Way Data Binding in Angular. In this post, we have learned the different ways Data Binding in the Angular project. Please, feel free to drop a comment in the below comment box. If you find doubt regarding the topic or you want to share more information about the topic. Happy Learning!