Learn About Angular Bindings

Introduction

This article demonstrates how to configure various types of Binding in Angular. This article starts with an introduction to Databinding. After that, it demonstrates various types of Databinding with source-code explanation. In the end, the article discusses Attribute and Style Binding.

Databinding

Databinding is the process of coordinating or synchronizing the application values between the HTML elements and JavaScript or TypeScript objects. It’s a binder who sits between these two and binding it from all the ways. There are four different types of Databinding:

Interpolation
Property Binding
Event Binding
Two-way Binding

In this article, we will cover only the Interpolation and Property Binding. In the next article, we will see Event and Two-way binding.

Interpolation ( {{…. }} )

Component Property

The Component property is one way of Interpolation. In our case, EmployeeCurrentObj is an instance of EmployeeComponent class which has a property named EmployeeName. If we place the property inside the {{.. }}, Angular replaces that EmployeeName with string value of the Employee Component property.

{{EmployeeCurrentObj.EmployeeName}} <br />

Angular fetches the corresponding value from the EmployeeComponent and displays it in the View.

Template Expression

Look at the below source-code.

<img src="{{sImgURL}}" style="height:130px" /> <br />

sImgURL variable or property belongs to EmployeeComponent. Angular evaluates the value of sImgURL from the EmployeeComponent and fills it in the blanks {{.. }}, Value inside the {{..}} is a template expression that Angular evaluates and converts into a string. Even if you place a number data type inside the braces, it converts the number into a string and displays it.

Let’s see one more example of Template Expression

{{100 + 100}}

Do you think the above code will execute? Yes, it will. I have already told you that Angular evlauates the content inside the braces and converts it into a string and displays it. As part of the evaluation, Angular will add these two numbers and converts it into a string and displays it.

Even if you place a method inside the expression, Angular will execute the method and get the expression results, then it will be converted into a string and displays it.

{{100 + 100 +ProvideValue()}}

The code samples I have listed will also be in the attached source-code, please have a look on that and comment if you have other questions.

Expression Context

Let’s have a look at this source-code

<div *ngFor="let emp of Employees">{{emp.EmployeeName}}</div>

Actually, Expression context is a component instance. From the source-code, given above you can find that Expression {{..}} may also refer to the properties of the template context. emp.EmployeeName refers the template input variable emp. Template Input variables cannot refer everything in the namespace, They cannot refer a form or window, but they could refer only the properties of the template context

Statement Context

Have a look at this source-code,

<button *ngFor="let emp of Employees" (click)="AlertEmployee(emp)">{{emp.EmployeeName}}</button>

Statement context may also refer to the properties of a template. Statement context is a component instance, in our case, emp is the component instance. emp instance may also refer the properties of a own template context which is a click event in our case. emp instance can be passed to an event handling method of the component.

Property Binding

What the component says, the UI element has to do. This is the simple sentence you must remember when you configure Property Binding. If the value in the component gets changed the element property will also get changed. Let’s have a look at the below source-code.

<img [src]="sCSharpImgURL" style="height:130px" /> <br />

The target here is UI element property [src] which will get updated based on the component property sCSharpImgURL. Another example is enabling or disabling the button state based on the component value

<button [disabled]="IsDisabled">Test Button</button>

Here IsDisabled values come from the component. If for any reason, this value gets changed the state of the button gets updated immediately. Kindly refer to the attached source-code to get more details of it. You can set only the target element, but you aren't able to read out from target element because it flows a value from a component data property into a target element property, This property binding can also be called as one-way binding. If the target property expects a string, then it returns a string. If the target property expects a boolean, then it returns a Boolean. If the target property expects an object, then it returns an object.

Right Choice - Property Binding or Interpolation

Both do the same thing. When you want to render the string values inside the braces {{… }} then you can very well go with Interpolation.

<img src="{{sImgURL}}" style="height:130px" /> <br />

When you want to render non-string values, then you can go with property binding.

Attribute Binding

So far we have seen setting an element property with a property binding. How are we going to bind if the target element doesn’t have any element property to bind? As you have an src element property in img control, you can bind with property binding.

<img [src]="sCSharpImgURL" style="height:130px" /> <br />

Look at the below source-code, you do not have any element property to bind with

property binding. These are the attributes, So you must do only the attribute binding

not the property binding.

<td [attr.colpsan]="10" *ngFor="let col of gridColumns">
{{col}}
</td>

Attribute binding is almost same as property binding, only difference is you should add prefix attr inside the braces, followed by a dot (.) and the name of the attribute.

Style Binding

Style Binding is an interesting one, If you have a requirement to update the style of any UI control based on the property in the component , then you can use Style Binding.

Look at the below source-code. The button font color or the background color will get changed based on the property IsDisabled property in component.

<button [style.color]="IsDisabled ? 'green': 'red'">Style Button</button>
<button [style.background-color]="IsDisabled ? 'blue': 'grey'">New Button
</button>

Not only the background color, conditionally you can set the font size as well.

SourceCode

Please use the link to download the source-code

Summary

Databinding is a process to bind the information between the JavaScript objects and the UI elements. There are 4 types of binding - Interpolation, Property Binding, Event Binding and Two-way Binding. We have covered Interpolation and Property Binding in this article. In my next article, we will see the remaining bindings Event Binding and Two-way Binding.