Data Binding is the process of connecting a target (such as a DOM element, property, or event) in a template to a model (data or behavior) in the component. This process lets the template to dynamically reflect changes in the component’s state or execute actions based on user interactions, using template expressions or template statements.
In Angular, data binding is used to establish communication between component class to view template and view template to the component class.
Types of Data Binding
There are two types of Data Binding in Angular −
- One-Way Data Binding
- Two-Way Data Binding
The diagram below shows the categorization of data binding −
One-Way Data Binding
One-way data binding is a one-directional interaction between a component and its template. The data flows either from component to its corresponding template or template to the component. If you perform any changes in your component, then it will reflect in the HTML elements.
One-way data binding can be achieved through the following ways −
- Text Interpolation
- Event Binding
- Property Binding
- Attribute Binding
Text Interpolation
In general,Text Interpolationis the process of formatting or manipulating strings. In Angular,itis used to display data from a component to a view. In this way of data binding, we use the curly braces {{ }}.
Let us consider a variable, name available in the component.
name: string ="John"Then, the name can be used in the template using interpolation as shown below −
Name:{{ name }}The final output of the template is shown below −
Name: John
Event Binding
Event binding is the process of setting an action to the event of an HTML element or another component. It is used to achieve one-way data binding where data flows from the view template to the component class. Here, we use the parentheses ( ).
Events are actions like a mouse click, double click, hover or any other keyboard and mouse actions. If a user interacts with an application and performs some actions, then an event will be raised.
Suppose there is a method called myAction() inside the component.
myAction(){// do some process}For this, event binding can be written as shown below −
<button type="submit"(submit)="myAction">Click here</button>Once the submit event is fired, myAction() method will be called and executed.
Property Binding
Property binding lets us bind a property of a DOM. It is used to show or hide a DOM element, or simply manipulate the DOM. Here, we use square brackets [ ]
Let us consider a property, name available in the component.
name: string ="John"Property binding can be written as shown below −
<input type="text" name="username"[value]="name"/>The output of the template is shown below −
<input type="text" name="username" value="John"/>Attribute binding
Attribute binding is used to bind the data from component to HTML attributes. The syntax is as follows −
<HTMLTag [attr.ATTR]="Component data">For example, let’s consider a property, name available in the component.
name: string ="John"Attribute binding can be written as shown below −
<input type="text" name="username"[attr.value]="name"/>The output of the template is shown below −
<input type="text" name="username" value="John"/>Two-way Data Binding
Two-way data binding is a two-way interaction where data flows in both ways, from component to views and views to component at the same time. If you do any changes in your property (or model) then, it reflects in your view and vice-versa. It is the combination of property and event binding.
The NgModel, a standalone Angular directive, is used for two-way data binding. This directive binds the form control to property and the property to form control.
The syntax of ngModel is as follows −
<HTML [(ngModel)]="model.name" />
A sample two-way data binding format is as follows,
// parent-comp template<child-comp [(data)]="dataChange()"/>Here, data will be passed initially from parent to child component and then, whenever the data gets updated in the child component, the child component will fire an event with updated data and the parent will capture the data through event callback method, dataChange().
We will learn two-way data binding concept in more detail in the upcoming chapter.