Data Binding in Angular

This post is primarily focused on what data binding is and the types of data binding available.

• String Interpolation.
• Property Binding.
• Event Binding.
• Two-Way Data Binding.

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

Types of Data Binding in Angular

1. String Interpolation: The type of one-way data binding where text is between a set of curly braces often uses the name of a component property. Angular replaces that name with the string value of the corresponding component property. The syntax of string interpolation is to use double curly braces {{ code }}.

2: Property Binding: 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, thus 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 the src tag, and also putting 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 you can check that both the buttons are disabled, but if we change the value of the variable to false, we can see that button in the string interpolation code is still disabled while in property binding code it is enabled.

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 using property binding.

3: Event Binding: Event binding is defined as the updating/sending of the value/information of a certain variable from the presentation layer (view) to the component (model). For example, 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, it will invoke and execute. Also, click() is not the only DOM event available; 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's 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 makes changes in the model with the view data and vice-versa. So, as we know, Angular uses the combination of Property binding and event binding to implement two-way data binding with the help of the ngModel directive.

NgModel is not a part of Angular's code library, it is defined in the forms module library so you need to import the FormsModule library in your app.module.ts file. 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!

Originally published on the Knoldus blog.