Detailed explanation of Angular data binding and its implementation

Preface

Web development requires data synchronization between models and views. These models basically contain the data values, while the views handle what the user sees. So if you’re wondering how this happens in Angular, this article on Angular data binding will help you.

Mentioned below are the topics discussed here:

• What is Data Binding?
• Types of Data Binding in Angular
• One-way Data Binding Interpolation Property Binding Event Binding
• Two-way Data Binding

What is data binding?

Data binding is the mechanism by which your application UI or user interface is bound to a model. Using data binding, users will be able to manipulate the elements present on the website using their browser. So, whenever some variable is changed, that particular change must be reflected in the Document Object Model or DOM.

In Angular, data binding defines the interaction between components and the DOM. Data binding is a part of all Angular versions, starting from AngularJS all the way to the latest Angular 9 version.

Types of data binding in Angular

Angular allows both one-way and two-way data binding. One-way data binding is a simple type of data binding where you manipulate the view through the model. This means that changes made to the Typescript code will be reflected in the corresponding HTML. In Angular, one-way data binding is achieved in the following way:

• Interpolation or String Interpolation
• Property binding
• Event binding

Two-way data binding, on the other hand, allows data to be synchronized in such a way that the model can be used to update the view, and the view can be used to update the model. This means that your application will be able to share information between component classes and their templates.

One-way data binding

In one-way data binding, data flows in one direction only, from the model to the view. As mentioned earlier, one-way data binding in Angular can be of three types, namely, interpolation, property binding, and event binding.

Interpolation Binding

Interpolation binding is used to return HTML output from TypeScript code (i.e. from components to views). Here, the template expression is specified within double curly braces. Interpolation allows you to add strings to text between HTML element tags and within attribute assignments. These strings are evaluated using Template expressions.

example:

<h1>{{title}}</h1>
 
Learn <b>{{course}}
</b> with Edureka.
 
2 * 2 = {{2 * 2}}
 
<div><img src="{{image}}"></div>

The Typescript portion of this code is as follows:

export class AppComponent {
  title = 'Databinding';
  course = 'Angular';
  image = 'paste the url here'
}

Output:

The component attributes are specified between two curly braces. Angular replaces the component property with the string value associated with that component property. It can be used in different places as needed. Angular converts interpolation to property binding.

Angular also allows you to configure the interpolation delimiter and replaces the two curly braces with something of your choice. This can be done using the interpolation option in the component metadata.

Template Expressions

Template expressions are enclosed within two curly braces, and they produce a value. Angular will evaluate the expression and then assign the specific expression to a property of the binding target, such as an HTML element, component, or directive.

Note: The 2*2 between the interpolation brackets is a template expression.

Property Binding

In Property Binding, values ​​flow from a component's property into a target element's property. Therefore, property binding cannot be used to read or extract data from the target element or to call methods belonging to the target element. Events raised by elements can be identified through event binding, which is described later in this article.

In general, you can say that you will use property binding to set a component property value to an element attribute.

example:

<h1>Property binding</h1>
<div><img [src]="image"></div>

In the above example, the src attribute of the image element is bound to the image property of the component.

Property binding and Interpolation

If you have noticed, you can see that interpolation and property binding are used interchangeably. Take a look at the example pair given below:

<h2>Interpolation</h2>
 
<div><img src="{{image}}"></div>
 
<h2>Property binding</h2>
 
<div><img [src]="image"></div>

Note that when you need to set an element attribute to a non-string data value, you must use attribute binding instead of Interpolation.

Event Binding

Using the event binding feature you can listen to certain events like mouse movement, key presses, clicks, etc. In Angular, event binding can be achieved by specifying the target event name within regular square brackets on the left side of the equal sign (=), and the template statement within closing quotes ("").

example:

<div>
  <button (click)="goBack()">Go back</button>
</div>

In the above example, "click" is the name of the target event, and "goBack()" is the statement of the template.

Output:

Whenever an event binding occurs, Angular sets up an event handler for the target event. When that particular event is raised, the template statements are executed by the handler. Typically, a receiver will involve a template statement that performs an action in response to the event. Here, binding is used to convey information about the event. These data values ​​of information include event strings, objects, etc.

Two-way Binding

Angular allows two-way data binding, which will allow your application to share data in both directions, i.e. from component to template and vice versa. This ensures that the models and views present in your application are always in sync. Two-way data binding will perform two things, the setting of element properties and listening to element change events.

The syntax for two-way binding is – [()}. As you can see, it is a combination of property binding syntax (i.e. []) and event binding syntax (). According to Angular, this syntax is like "bananas in a box."

example:

<label ><b>Name:</b>
        <input [(ngModel)]="course.name" placeholder="name"/>
</label>

When you execute this code, you will see that changes to the model or view will result in changes to the corresponding view and model. Take a look at the image below, which changes the course name from “Python” to “Pytho” from the view:

The above is a detailed explanation of Angular data binding and its implementation. For more information about Angular data binding and its implementation, please pay attention to other related articles on 123WORDPRESS.COM!