Data Binding in Angular

 

Data Binding

    Data Binding is the process that establishes a connection between the app UI and the data it displays. If the binding has the correct settings and the data provides the proper notifications, when the data changes its value, the elements that are bound to the data reflect changes automatically.

Data binding automatically keeps your page up to date based on your application’s state. User can use data binding to specify things such as the source of an image, the state of a button, or data for a particular user. For example, if the user edits the value in a textbox element, the underlying data value is automatically updated to reflect that change. Data binding is used in web applications that contain interactive components such as forms, calculators, tutorials and games.

v  Angular JS Controller:

The Angular JS controller is the part of the Angular JS application that controls the data binding. It is responsible for linking the data to the view and vice-versa. The controller also handles all the user input and output. This controller is very important in Angular application as it is responsible for managing the data binding. Without a controller, the data binding would not be possible, as the user would not be able to interact with the application.

v  Binding Types:

1.      Event binding –

    This data binding types is when information flows from the view to the component when an event is triggered. To bind to an event, user can user 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 above example, the target event name is click and the template statement is onSave(). Template statements are methods or properties that user can use in their HTML to respond to user events.

2.      Interpolation –

Text representing variables in components are placed in between double curly braces in the template. Interpolation is user for one way data binding. It moves data one direction from user components to HTML elements. Angular evaluates the expressions into a string and replaces it in the original string and updates the view. Angular uses the {{ }} in the template to denote the interpolation.

Eg:

3.      Two – way data binding-

Two way binding is a mechanism where data flows both ways from the component to the view and back. It will help users to establish communication bi-directionally. If a property in the component is changed that change flows to the view and same way change in view is reflected in the bound property in the component. In Angular, ngModel directive is used for two-way bindings. It simplifies creating two way data bindings on from elements like input elements.

4.      Property binding-

Property binding is a one-way mechanism that lets user set the property of a view element. Use property bindings to do things such as toggle button functionality, set paths programmatically, and share values between components. Property binding moves a value in one directional, from a component’s property into a target element property. To bind to an element’s property, enclose it in square brackets, [ ], which identifies the property as a target property.

E.g:      

E.g: Using data binding, user can pass data between the component and template

 

v  One-Way data binding vs. Two- way data binding:

v  Property binding vs interpolation:

Interpolation is used to just display a piece of data in HTML, such as displaying a title or a name.

Whereas Property binding lets us bind a property of a DOM object, for example the hidden property, to some data value. When user need to concatenate strings, at that time they have to use interpolation, whereas property binding is used when user have to set an element property to a non-string value.

v  Module v/s. Components:

ü  Modules are objects that help you to organize dependencies into discrete units

ü  Components are new elements that will compose the majority of your application’s structure and logic

v  Attribute Binding:

    Attribute binding in Angular helps user to bind HTML attribute of elements with user template. This can be useful when user want to dynamically update the appearance or behavior of an element based on some condition.

    For example, user might want to hide an element unless a user is logged in, or change the color of an element based on its status. To bind to an attribute, user use the square brackets around the attribute name.

v  Class Binding:

Angular offers various ways to bind data to HTML elements. Class binding is one of them. It allows user to dynamically add or remove CSS classes from an element. This can be useful for applying styles based on certain conditions.

v  Style Binding:

Style binding is a one-way data binding technique that can be used to set the value of a CSS property on an element. To use style binding, user first need to have a CSS property that user want to bind to an element.