Understanding Angular Data Binding - Two Way and One Way

Angular is an open-source JavaScript framework developed by Google, designed primarily for building single-page web applications. One of the most powerful features of Angular is its templates and data binding capabilities. Angular’s data binding allows us to seamlessly connect component properties with template elements, enabling dynamic updates and user interactions.

In this article, we’ll delve into Angular data binding and explore two types of data binding - Two Way and One Way.

Angular Templates

Angular templates are an integral part of the data binding process. A template is a representation of a view, consisting of HTML, CSS, and Angular-specific markup. Angular templates enable the dynamic rendering of content, based on data from a component.

The Syntax of Templates

Angular templates use a special syntax - an extension of HTML - to interact with component data. The syntax uses Angular directives and interpolation to let the templates interact with the component data.

Directives

Directives are a set of instructions given to Angular that make the templates dynamic. Directives come in two flavors, Structural and Attribute Directives. Structural directives alter the layout of the DOM by adding or removing elements, while Attribute Directives alter the behavior or appearance of elements.

Interpolation

Interpolation is the process of binding component values or expressions, to DOM elements within the template, via double curly braces {{ }}. The expressions within the curly braces are evaluated and transformed to their corresponding values, and this value is updated continuously as the component changes.

Now that we have a better understanding of Angular templates let’s take a look at Angular’s Data Binding.

Angular Data Binding

Data binding is a technique that allows values in a component to communicate with the DOM, and vice versa. In Angular, data binding enables the synchronization of data between the component and the template.

Angular offers three types of Data Binding:

1. Interpolation
2. Property Binding
3. Event Binding

Interpolation

Interpolation is a one-way binding technique that involves binding component values with the HTML template elements, using the {{ }} syntax. It is used whenever we need to display a value within the template.

Consider the following example:

<h1>My favorite aircraft is the {{ aircraft }}</h1>

In the above code snippet, the value of the aircraft variable in the component is bound to the template.

Property Binding

Property binding is another one-way data binding technique in which a component property is bound to an attribute or property of an HTML element within a template.

Consider the following example:

<img [src]="imagePath">

In the above code snippet, the src property of the img element is bound to imagePath variable in the component.

Event Binding

Event binding is used to trigger a method in the component when a user interacts with an HTML element within the template. An event binding is set using the parenthesis ( ) notation.

Consider the following example:

<button (click)="incrementCounter()">Increase Counter</button>

In this example, the click event of the button element is bound to the incrementCounter() method in the component.

Two-Way Data Binding

Two-way data binding is a powerful technique that synchronizes data between the component and the view. Two-way data binding can be achieved by combining attribute and event bindings.

In two-way data binding, changes in the view are reflected back in the component, and changes in the component are reflected in the view. The syntax for two-way data binding is [()].

Consider the following example:

<input [(ngModel)]="aircraft">

In the above code, the ngModel directive is used to enable two-way data binding, such that when the user types into the input box, the component variable aircraft is updated. Likewise, if the value of the aircraft variable is updated, the input box’s value is also updated.

Working with Two-Way Data Binding

Two-way data binding is used in many scenarios. Let’s assume we want to bind two fields, Departure and Arrival in a flight booking application. We can achieve this using the two-way data binding technique.

The following code snippet will bind both fields together using two-way data binding:

<div>
  <h3>Departure</h3>
  <input [(ngModel)]="departure" />
</div>
<div>
  <h3>Arrival</h3>
  <input [(ngModel)]="arrival" />
</div>

In the above code snippet, [(ngModel)] sets up the two-way binding of the departure and arrival variables. Any changes made in the input fields are automatically synchronized with the component, and any changes made to the departure and arrival variables are reflected in the input fields.

Conclusion

In conclusion, Angular’s data binding can be divided into three types: Interpolation, Property Binding, and Event Binding. In addition to these types, Angular also provides Two-Way Data Binding, which synchronizes the data flow between the component and the template.

Angular’s Mastery of data binding is an essential powerhouse; it simplifies the development of both small and large web apps the same way coding provides fuel to aviation. Data Binding in Angular is a tool that every developer must learn to leverage to create great applications.