Angular Data Binding Overview
Data binding is a main concept in Angular, establishing communication between components and the DOM. Let's explore some of the most important data binding techniques.
Jan 29, 2019 • 4 Minute Read
Introduction
Data binding is one of the main concepts in Angular. It helps users to establish the communication between a component and the DOM. Using data binding will help users develop interactive applications by letting users exchange data from component to DOM and vice-versa. In the following guides, I will explore some of the important techniques used in data binding.
Interpolation: {{...}}
Interpolation helps you to bind the values to the DOM using the template expression({{}}). The value or text between template expressions will get evaluated first and then converted to a string. The string value will then be bound to the DOM.
Let's consider an example of a Person object that has a name and address. In the example below, person.name and person.address will get evaluated first and the value of these objects will get bound to the DOM.
<li>Name: {{person.name}}</li>
<li>Adress: {{person.address}}</li>
Property Binding: [property]
Property binding helps you to pass value from the component to the specified property. This will help users to easily pass the data from component to the specified property. Property binding will also be used when users pass data from parent to a child component with input binding. The property can be an HTML attribute.
As shown in the example below, we are binding the name of the person object to the value property of the input tag.
<input type="text" [value]="person.name">
There are also other property bindings like Attribute, Class and Style binding. Whenever users want to set the value of an attribute directly, then we can use an attribute binding. If users want to add and remove CSS class names from an element's class attribute, then we can use class binding. And if users want to set inline styles, then we can use a style binding.
Let's consider an example that applies a background color from the value of selectedColor in the component.
<div [style.background-color]="selectedColor">
Event Binding: (event)=”function”
Whenever users perform some event on Angular web application (eg.: click, change, keyup), it will call the specified method in the component.
Let’s say in the example below, if we want fullName() function to be called, whenever we click the button then we will bind fullName() method to the (click) event of the button tag.
<button (click)="fullName()"></button>
Two-way Data Binding: [(ngModel)]=”value”
Two-way data binding allows you to exchange the data from DOM to component and vice-versa. For two-way data binding, Angular uses the banana in a box syntax[()]. Banana box syntax is basically the combination of property binding and event binding. It also allows users to distinguish two-way data binding from other techniques.
Let's consider an example where the person.name data property is used as the value for the input but, if the person changes the value, the component property gets updated automatically to the new value. Let’s say person name be initially “Jhon”, which will be bound to the input box at the beginning. Once the user makes any changes in the input box, let’s say he changed the person name from “Jhon” to “Kelly”. Then the new value held by the person.name object in the component will be “Kelly”. Similarly if any changes to the value of the object in the component, then that will get reflected in the DOM.
<input type="text" [(ngModel)]="person.name">
Conclusion
In this guide, we saw an overview of some data binding techniques in angular and how we can use them to have an interaction between DOM and component.