Angular Data Binding

Hello everyone!

I’m Nirmal Kumar and this is my first post about Data Binding in Angular. I hope you get some insight from this. Comment out your suggestions if any.

What is Angular Data Binding

Web development requires data synchronization between the models and the views. The models basically contain the data values whereas views deal with what the user sees. So if you want to know how this happens in Angular, this article on Angular Data Binding is to help you.

What is Data Binding?

Data Binding is the mechanism that binds the applications UI or User Interface to the models. Using Data Binding, the user will be able to manipulate the elements present on the website using the browser. Therefore, whenever some variable has been changed, that particular change must be reflected in the Document Object Model or the DOM.

In Angular, Data Binding defines the interaction between the components and the DOM. Data Binding is a part of all Angular versions starting from AngularJS right through 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 re allowed to manipulate the views through the models. This implies, making changes to the Typescript code will be reflected in the corresponding HTML. In Angular, One-way data binding is achieved through:

• Interpolation or String Interpolation
• Property binding
• Event binding

Two-way data binding, on the other hand, allows synchronization of data in such a way that the views can be updated using the models and the models can be updated using views. This means that your application will be able to share information between a component class and its template.

One-way Data Binding

In one-way data binding, data flows only in one direction i.e from the models to the views. As mentioned earlier, one-way data binding in Angular can be of three types i.e Interpolation, Property binding, and Event binding.

Interpolation Binding

Interpolation binding is used to return HTML output from TypeScript code i.e. from the components to the views. Here, the template expression is specified within double curly braces. Through Interpolation, strings can be added into the text that is present between HTML element tags and within attribute assignments. These strings are calculated using Template expressions.

EXAMPLE:

<h1>{{title}}</h1>
Learn <b> {{course}}
</b> with Us.
2 * 2 = {{2 * 2}}

The Typescript part of this code is as follows:

export class AppComponent {
 title = ‘Databinding’;
 course =’Angular’;
}

OUTPUT:

Databinding
Learn Angular with Us
2*2 = 4

The component property is specified between the 2 curly braces. Angular will replace this component property with the string value associated with that component property. It can be used in different places according to the requirements. Angular converts interpolation into property binding. Check out this Web developer course and learn more about Angular today.

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

Template expressions

Template expressions are present within the two curly braces and they produce a value. Angular will execute that expression and then, it assigns that particular expression to a property of a binding target such as HTML elements, components, or directives.

NOTE: 2 * 2 present between interpolation brackets, is a template expression.

Property Binding

In Property binding, value flows from a component’s property into the target elements property. Therefore, Property binding can’t be used to read or pull data from the target elements or to call a method that belongs to the target element. The events raised by the element can be acknowledged through event binding which will be covered later on in this article.

In general, one can say that the component property value will be set to the element property using Property binding.

EXAMPLE:

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

In the above example, the src property of the image element is bound to a component’s image property.

Event Binding

The Event binding feature lets you listen to certain events such as mouse movements, keystrokes, clicks, etc. In Angular, event binding can be achieved by specifying the target event name within regular brackets on the left of an equal to ( = ) sign, and the template statement on the right side within quotes (” “).

EXAMPLE:

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

Whenever event binding occurs, an event handler will be set by Angular for the target event. When that particular event gets raised, the template statement is executed by the handler. Generally, receivers are involved with template statements that perform actions in response to the event. Here, binding is used to convey information about the event. These data values of the information include event string, object, etc.

Two-way Binding

Angular allows two-way data binding that will allow your application to share data in two directions i.e. from the components to the templates and vice versa. This makes sure that the models and the views present in your application are always synchronized. Two-way data binding will perform two things i.e. setting of the element property and listening to the element change events.

The syntax of two way binding is — [( )}. As you can see, it is a combination of the property binding syntax i.e. [ ] and the event binding syntax ( ).

EXAMPLE:

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

Thanks for reading!