Angular - Data Binding

Previous
Quiz
Next

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 −

The diagram below shows the categorization of data binding −

types of data binding in angular

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 in angular

One-way data binding can be achieved through the following ways −

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.

two way data binding in angular

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.

Conclusion

Binding provides multiple options to connect a component to it's template. This enables the developer to create rich front-end application easily. Binding reduces the complexity of front-end logic and enable developer to concentrate on developing more feature in a short period of time.

Multiple Choice Questions on Angular Data Binding

Based on the Angular data binding concept, there are three MCQs given below. Answer them correctly to test your knowledge about the topic −

Answer : A

Explanation

In Angular, data binding is used to establish communication between component class to view template and view template to the component class.

Q. 2 - Syntax used for one-way data binding:

A - {{data}}

B - (data)

C - [(data)]

D - [data]

Answer : D

Explanation

One-way data binding to bind data from the component to the view is done using square brackets [ ].

Q. 3 - Which of the following is used for two-way data binding?

A - [ngModel]

B - [(ngModel)]

B - {{ngModel}}

B - ngModel

Answer : B

Explanation

The [(ngModel)] syntax is used for two-way data binding in Angular.

Print Page
Previous
Next
Advertisements