Abstract: Data binding is a mechanism for binding an application UI or user interface to a model. With data binding, users will be able to manipulate elements that exist on the site using a browser.

This article is from the Huawei Cloud community “What is Angular Data Binding and how to Implement it?” , original author: Yuchuan.

Web development requires data synchronization between models and views. These models basically contain data values, and views process what the user sees. So if you want to know how this happens in Angular, this Article on Angular data binding will help.

The following are the topics discussed here:

  • What is Data Binding?

  • Types of Data Binding in Angular

  • One-way Data Binding

o Interpolation

o PropertyBinding

o EventBinding

  • Two-way Data Binding

What is data binding?

Data binding is a mechanism for binding an application UI or user interface to a model. With data binding, users will be able to manipulate elements that exist on the site using a browser. Therefore, 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 a component and the DOM. Data binding is a part of all Angular releases, from AngularJS to the latest Angular 9 release.

Data binding types in Angular

Angular allows one-way and two-way data binding. One-way data binding is a simple type of data binding in which you manipulate views through models. This means that changes made to Typescript code are reflected in the corresponding HTML. In Angular, one-way data binding is implemented in the following way:

  • Interpolation or String Interpolation

  • Property binding

  • Event binding

Bidirectional data binding, on the other hand, allows data to be synchronized in such a way that the view can be updated with the model, and the model can be updated with the view. 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 only one direction, from the model to the view. As mentioned earlier, there are three types of one-way data binding in Angular: interpolation, property binding, and event binding.

Interpolation Binding

Interpolation bindings are used to return HTML output from TypeScript code, that is, from components to views. Here, the template expression is specified in 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>
Copy the code

The Typescript portion of this code looks like this:

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

Output:

The Component property is specified between two curly braces. Angular replaces the component property with the string value associated with the component property. It can be used in different places as required. Angle translates interpolation into property binding.

Angular also allows you to configure interpolation delimiters and replace two curly braces with what you choose. You can do this using the interpolation option in the component metadata.

Template expression

Template expressions are inside two braces, and they produce a value. Angular executes the expression and assigns a specific expression to a property of the binding target, such as an HTML element, component, or directive.

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

Attributes bind

In property binding, values flow from the component’s properties into the target element’s properties. 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 the element can be confirmed through event bindings, which are described later in this article.

In general, you can say that component property values are set to element properties using property bindings.

Example:

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

In the example above, the SRC attribute of the image element is bound to the component’s image attribute.

Property binding and Interpolation

If you’ve noticed, interpolation and property binding are used interchangeably. Take a look at the following example pairs:

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

Note that you must use property binding instead of Interpolation when you need to set element attributes to non-string data values.

event

With event binding, you can listen for certain events, such as mouse movements, keystrokes, clicks, and so on. In Angular, event binding is implemented by specifying the target event name inside regular square brackets to the left of the equals sign (=), as well as template statements inside close quotes (” “).

Example:

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

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

Output:

Angular sets an event handler for the target event each time an event binding occurs. When this particular event is raised, the template statement is executed by the handler. Typically, receivers involve template statements that perform actions in response to events. In this case, binding is used to convey information about the event. These data values of information include event strings, objects, and so on.

Two-way Binding

Angular allows two-way data binding, which allows your application to share data in both directions, from component to template, and vice versa. This ensures that the models and views that exist in the application are always in sync. Two-way data binding performs two things, namely setting element attributes and listening for element change events.

The syntax for bidirectional binding is — [()}. As you can see, it is a combination of property binding syntax (that is, [] and event binding syntax ()). Angular says this syntax is similar to “bananas in a box.”

Example:

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

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

Click to follow, the first time to learn about Huawei cloud fresh technology ~