5. Binding data, event, property, two way data binding

Data binding automatically keeps your page up-to-date based on your application’s state. You use data binding to specify things such as the source of an image, the state of a button, or data for a particular user.

Angular provides three categories of data binding according to the direction of data flow:

1. From the source to view(Interpolation and property binding).
2. From view to source(event binding).
3. In a two way sequence of view to source to view(two-way data binding).

i. Interpolation

Text interpolation lets you incorporate dynamic string values into your HTML templates. Use interpolation to dynamically change what appears in an application view. Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters.

To illustrate how interpolation works, consider an Angular component that contains a currentCustomer variable:

currentCustomer = ‘Maria’;

Use interpolation to display the value of this variable in the corresponding component template:

<h1>{{ currentCustomer }}</h1>

Angular replaces currentCustomer with the string value of the corresponding component property. In this case, the value is Maria.

ii. Property binding

Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.

To bind to an element’s property, enclose it in square brackets, [], which identifies the property as a target property. A target property is the DOM property to which you want to assign a value. For example, the target property in the following code is the image element’s src property.

<img [src]=”itemImageUrl”>

Here, itemImageUrl represents a property present in the component class. Angular will treat the value of that property as an expression and will try to resolve or evaluate it and assign the resultant value to the src property of the img element.

iii. Event binding

Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

To bind to an event you use the Angular event binding syntax. This syntax consists of a target event name within parentheses to the left of an equal sign, and a quoted template statement to the right. In the following example, the target event name is click and the template statement is onSave().

<button (click)=”onSave()”>Save</button>

iv. Two-way data binding

Two-way data binding refers to sharing data between a component class and its template. If you change data in one place, it will automatically reflect at the other end. 

To start with, you need to first import the FormsModule in the AppModule so that you can use the ngModel directive.

Then you need an input field in your template which can be binded to a component property using the ngModel directive.

For example, if you change the value of the input box, then it will also update the value of the attached property in a component class. Angular’s two-way binding syntax is a combination of square brackets and parentheses, [()]. The [()] syntax combines the brackets of property binding, [], with the parentheses of event binding, (), as follows.

Quiz:

What is data binding in Angular?

a) It is a technique to establish communication between the component and its template.

b) It is a way to store data in the browser’s local storage.

c) It is a method to fetch data from an API.

d) It is a way to style HTML elements.

What is the purpose of interpolation in Angular?

a) To bind data from the component to the template.

b) To handle events in the template.

c) To create reusable components.

d) To perform validation on form inputs.

Which syntax is used for two-way data binding in Angular?

a) {{ }}

b) [ ]

c) ( )

d) [( )]

Which directive is used to bind an event in Angular?

a) ngFor

b) ngIf

c) ngModel

d) ( )

What is the purpose of event binding in Angular?

a) To bind data from the component to the template.

b) To handle events in the template.

c) To create reusable components.

d) To perform validation on form inputs.

Which syntax is used to bind a component property to an element’s attribute in Angular?

a) {{ }}

b) [ ]

c) ( )

d) [( )]