DATA BINDING IN ANGULAR

This blog is primarily focused on what is Data Binding and its types: –

• String Interpolation

• Property Binding

• Event Binding

• Two-Way Data Binding

Data Binding is one of the most powerful and important features in a software development language. It allows us to define communication between component and view. So we can say that Data Binding is passed from component to view and from view to the component.

1: Interpolation: It is the type of one-way data binding, The text between the braces is often the name of a component property. Angular replace that name with the string value of the corresponding component property. The syntax of string interpolation is to use double curly braces {{ and }}.

Now open a binding.component.html file and write your code for string interpolation.

<h1>Data Binding in Angular</h1><br>
<h2>{{stringInterpolation}}</h2>

In order to achieve the desired data binding technique update the following code in a binding.component.ts file

import { Component, OnInit } from '@angular/core';	
@Component({
 	 selector: 'app-binding',
 	 templateUrl: './binding.component.html',
 	 styleUrls: ['./binding.component.css']
	})
	export class BindingComponent implements OnInit {
 	 constructor() { }
 	  stringInterpolation = 'Learning string interpolation';
  	ngOnInit() { } 
}

Output: 

2: PropertyBinding: Property Binding allows us to bind the view of the template expression. Property binding in simple term is defined as updating the value of a certain variable in component (model) and displaying it in view (presentation layer).

This is a one-way mechanism such that it allows you to change the value whenever you want but only at the component level.

binding.component.html

<h1>PropertyBinding</h1>
<img [src]="imagePath" class="image-adjustment"/><br>

Note: You can achieve property binding using square brackets for src tag also put component value in quotes.

binding.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-binding',
  templateUrl: './binding.component.html',
  styleUrls: ['./binding.component.css']
})
export class BindingComponent implements OnInit {
  constructor() { }
   imagePath: string = 'assets/images/Databinding.png';
  ngOnInit() {}
  }
}

Though, both doing the same thing, so what is the difference between Property Binding and Interpolation?

For better understanding refer the given example below:

Now we take one button and the value of button is coming from the component class which is disabled using disabled property.

binding.component.html

<h1>Data Binding in Angular</h1><br>
<h1>Interpolation</h1>
<img  src = {{imagePath}} class="image-adjustment"/>
<br>
<button disabled={{currentValue}}>CLICK ME</button>

Now the same thing will do with property binding. In Property Binding the attribute [disable] we have to define in a square bracket and in quotes we can mention the name of the variable.

<h1>PropertyBinding</h1>
<img [src]="imagePath" class="image-adjustment"/><br>
<button [disabled]="currentValue" (click)="onClick()">CLICKME</button>

binding.component.ts

export class BindingComponent implements OnInit {
  constructor() { }
   imagePath: string = 'assets/images/Databinding.png';
   currentValue: boolean = true;
  ngOnInit() {}
}

Output:

So Now u can check that both the buttons are disabled now but for now, if we change the value of the variable to false, we can see that button in string interpolation is still disabled while in property binding it is enabled now.

Example:

export class BindingComponent implements OnInit {
  constructor() { }
   imagePath: string = 'assets/images/Databinding.png';
  currentValue: boolean = false;
  ngOnInit() {
  }
}

Output:

Now we can see that button in string interpolation is still disabled while in property binding it is enabled now.

Note: So where you have to use string expression use interpolation and when you are dealing with non string expression use property binding.

3: Event Binding: Event binding in simple term is defined as updating/sending the value/information of a certain variable from the presentation layer (view) to the component (model). For eg: clicking a button.

binding.component.html

<h1 Event Binding></h1>
<h1>{{title}}</h1>
<button (click)="changeMyTitle()">Title is changed on click of this button.</button>

binding.component.ts

export class BindingComponent implements OnInit {
  constructor() { }
   title = 'Learning string interpolation';
  ngOnInit() {
  }
changeMyTitle() {
  this.title = 'Learning Event Binding';
}
}

Output:

Now the user will take any action from the template and according to that this method will invoke and execute. Also, not only click() you can also use other events such as submit, mouse enter, blur events, etc.

4: Two-way Data Binding: Two-way data binding is a combination of both Property and Event binding and it is a continuous synchronization of a data from view to the component and component to the view. i.e changes made in the component data should sync to the view and should immediately update the model into the corresponding component with view data.

Two-way data binding is mainly used in data entry forms where the user changes the view and made changes in the model with the view data and vice-versa. So as we know angular use the combination of Property binding and event binding to implement two-way data binding with the help of directive ngModel.

NgModel is not a part of angular code library, it is defined in the forms module library so you need to import FormsModule library so you need to import FormsModule in app.module.ts and it is coming from the library i.e angular forms and now we can use the ngModel directive to implement two-way data binding.

binding.component.html

<h1>Data Binding in Angular</h1>
<h2>Learning Two-Way DataBinding</h2>
<input type = "text" [(ngModel)]="userName"/>
<br>
<h4>Welcome: {{userName}}</h4>

Output:

Thanks for reading!!!