What is data binding in Angular?

Data binding is a core mechanism in Angular that allows the interaction of the application’s user interface (view) with the model. It represents communication between the component and DOM (Document Object Model). Data binding helps the user to manipulate the website elements and see the reflected changes on the DOM.

Forms of data binding in Angular

Data binding exists in two primary forms:

One-way Data Binding: Unidirectional data flow from models to views.
Two-way Data Binding: Bidirectional data flow between models and views.

One-way data binding

There are three types of one-way data binding:

Interpolation

Interpolation binding displays the HTML output based on typescript code. It shows the bound value of an element from the component. In the following typescript code, we have defined three properties.
```
export class AppComponent {
  title = 'Databinding';
  course ='Angular';
  image = 'paste the url here'
}
```
The HTML file calls the title property using double curly brackets {{}}. The DOM will display the property title value on the website.
```
<li>{{title}}</li>
```
Property binding

This binding lets us bind a component’s property to a DOM object. It is used to set the value of properties of HTML elements with the help of square brackets []. For example, look at the declaration of the isDisabled property in the app.component.ts file.
```
isDisabled : boolean = true;
```
Using the disabled property in the respective HTML file:
```
<button [disabled]="isDisabled"
```

Event binding

Event binding allows the user to respond to specific actions such as mouse clicks and touches. Events can be bound by specifying the target event name and required method defined in typescript. In the below example, click is the target event, and displayList() is the method necessary to respond to the click event.

<button (click)="displayList()"> List </button>

Two-way data binding

Two-way data binding enables the communication between models and views in both directions, i.e., views to models and models to views. Its syntax includes [(ngModel)] where () represents the event binding and [] is used to bind the property. It enables the user on the UI to make changes that will be reflected in the component. user.familyname in the following example is passed as an input value in the app.component.html file. If the user changes its value, it will automatically update the component.

<!-- Interpolation -->
<div>
  <h1>
    {{ title }}!
  </h1>
</div>

<!-- Property Binding -->
<div>
  <button [disabled]="isDiabled">Property Binding</button>
</div>

<br />

<!-- Event Binding:  displayList() method is called in respose to the click event -->
<div>
  <button (click)="displayList()">Event Binding</button>
</div>

<!-- Two-way binding: As the input is changed, the value of the familyname is updated-->
<div>
  <input [(ngModel)]="familyname" placeholder ="Two-way binding"> 
  <br />
  {{familyname}}
</div>

Explanation

The app.component.html file contains the examples of data binding that have been explained as follows:

Line 4: For interpolation, use {{title}}. It renders the value of the title from app.component.ts to UI.
Line 10: We are binding the disabled property to the non-string value of isDisabled. When isDisabled = true, the button will be disabled. This is property binding.
Line 16: Event binding is explained by this line of code. displayList() method is called in response to the click target event.
Line 22: As the user changes to input, the value of the familyname is updated. This is how two-way binding is performed.

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

What is data binding in Angular?

Forms of data binding in Angular

One-way data binding

Two-way data binding

Code

Explanation