An important Angular concept is data binding. It enables us to specify how components and views communicate. Data binding is transmitted back and forth from the view to the component.

Data synchronization between the models and the views is necessary for web development. While views deal with what the user sees, models essentially contain the data values. So, if you're interested in learning how Angular handles this, read this post on Angular Data Binding.

The subjects that are covered here are listed below:

  • What is Data Binding?
  • Types of Data Binding in Angular
  • One-way Data Binding
    1. Interpolation
    2. Property Binding
    3. Event Binding
  • Two-way Data Binding

What is Data Binding?

Angular's primary concept of data binding makes it simple to design interactive apps without worrying about pushing and pulling data because it defines communication between a component and the DOM.

Types of Data Binding in Angular

Both one-way and two-way data binding are supported by Angular. One-way data binding is a straightforward sort of data binding that enables you to control the views via the models. This suggests that editing the Typescript code will update the accompanying HTML. One-way data binding in Angular is accomplished by:

  • Interpolation or String Interpolation
  • Property binding
  • Event binding

On the other side, two-way data binding enables data synchronization so that views can be updated using models and models can be updated using views. As a result, a component class and its template will be able to communicate information throughout your application.

One-way Data Binding

Data only moves in one direction, from the models to the views, in one-way data binding. One-way data binding in Angular can take one of three different forms: interpolation, property binding, or event binding.


{{ value }}: Adds the value of a property from the component

<li>Name: {{ }}</li>
<li>Address: {{ user.address }}</li>

Property binding

[property]="value": The component passes the value to the designated property or straightforward HTML attribute.

<input type="email" [value]="">

Event binding

(event)=?function?: Call the provided method in the component whenever a specific DOM event occurs (such as a click, change, or keyup).

<button (click)="logout()"></button>

Two-way Data Binding

Angular supports two-way data binding, which enables data sharing between components and templates as well as the other way around. This ensures that your application's models and views are consistently synchronised. Setting the element property and listening for element change events are two actions that two-way data binding will carry out.

Two-way binding uses the syntax [()]. As you can see, it combines the event binding syntax [] with the property binding syntax []. ( ). This syntax resembles "Banana in a Box," according to Angular.

<label ><b>Name:</b>
   <input [(ngModel)]="" placeholder="name"/>

Executing this code will show you that alterations to either the models or the views will affect the relevant views and models.

Recommended Posts

View All

Angular 13 Firebase Send Mail Example

Learn how to send a verification email to a new user in Angular, as well as how to prohibit users from accessing their accounts until the email has be...

Angular 13 Data Binding Example Tutorial

The concept of data binding will be discussed. You&amp;#039;ll also find out how to bind data in an Angular web application

What is a template?

A template is a pre-designed format that helps create consistent and professional-looking documents or websites. Learn more about templates here.

What is an Angular Module?

Learn what an Angular module is, its purpose, and how to create and use them in your Angular applications. Get started with this comprehensive guide.

What is the difference between component and directive in Angular?

Learn the difference between Angular's components and directives. Discover their unique features and how to use them to build powerful web application...