Angular: It's 2021, why haven't you used Angular?

Abstract: data binding is a mechanism to bind the application UI or user interface to the model. Using data binding, users will be able to use the browser to manipulate the elements present on the website.

This article is shared from the HUAWEI CLOUD community " What is Angular data binding and how to implement it?" ", original author: Yuchuan.

Web development requires data synchronization between the model and the view. These models basically contain data values, while views deal with what the user sees. So, if you want to know 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 a mechanism for binding the application UI or user interface to the model. Using data binding, users will be able to use the browser to manipulate the elements present on the website. Therefore, whenever certain variables are 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. From AngularJS to the latest Angular 9 version, data binding is part of all Angular versions.

Types of data binding 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 can 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 implemented in the following ways:

• Interpolation or String Interpolation
• Property binding
• Event binding

On the other hand, two-way data binding 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 only one direction, that is, from the model to the view. As mentioned earlier, one-way data binding in Angular can be of three types, namely interpolation, attribute binding and event binding.

Interpolation Binding

Interpolation binding is used to return HTML output from TypeScript code (that is, from component to view). Here, the template expression is specified in double curly braces. Through interpolation, character strings can be added to the text between HTML element tags and within attribute assignments. These strings are calculated using Template expressions.

example:

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

The Typescript part of this code is as follows:

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

output:

The component attribute is specified between two curly braces. Angular will replace the component property with the string value associated with the component property. It can be used in different places as needed. Angle converts interpolation to attribute binding.

Angular also allows you to configure the interpolation delimiter and replace the two curly braces with what you choose. This can be done using the interpolation option in the component metadata.

template expression

Template expressions are inside two curly braces, and they produce a value. Angular will execute the expression, and then assign the specific expression to the attributes of the binding target, such as HTML elements, components, or instructions.

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

Property binding

In "attribute binding", values flow from the attributes of the component to the attributes of the target element. Therefore, attribute binding cannot be used to read or extract data from the target element or call methods belonging to the target element. Events triggered by elements can be confirmed through event binding, which will be introduced later in this article.

Generally, it can be said that attribute binding will be used to set component attribute values as element attributes.

example:

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

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

Property binding and Interpolation

If you have noticed, you can see that interpolation and property binding can be 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>

Please note that when you need to set element attributes to non-string data values, you must use attribute binding instead of Interpolation .

Event binding

Using the event binding function, you can listen to certain events, such as mouse movements, key presses, clicks, etc. In Angular, event binding can be achieved by specifying the target event name in the regular square brackets on the left side of the equal sign (=), as well as the template statement in the closing quotation mark ("").

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 an event handler for the target event. When this particular event is raised, the template statement is executed by the handler. Typically, the recipient will involve template statements that perform actions in response to the event. Here, 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 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 that exist in the application are always in sync. Two-way data binding will perform two things, namely the setting of element properties and listening for element change events.

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

example:

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

When this code is executed, 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 picture below, which changes the course name from "Python" to "Pytho" from the view:

Click to follow and learn about Huawei Cloud's fresh technology for the first time~