[ANGULAR] Property Bindings, Interpolation and Class Bindings

In this article, I am going to build a sample form which contains fields like email, password, and button to log in the application. Through this sample program, we are going to have a brief introduction to concepts.

• Interpolation
• Property Binding
• Class Binding

Before going to actual concepts let’s first look at how a simple login form’s markup looks like before applying ANGULAR concepts.
For this, I have created new component “Bindings” in an application using the following the command “ng g c Bindings” using integrated terminal.

Once the component is created successfully navigate to “bindings.component.ts” (typescript file) to make markup changes.
For user understanding, I have integrated HTML markup in typescript file itself under the template section as shown below.

Here I have constructed the form by hardcoding the values, ID’s, and styles of form controls.
Now let’s implement the concept called property binding in ANGULAR to make the code look more dynamic using component class.
Using property binding, we can bind ID’s, styles and values to controls dynamically using properties in the component class. For this we either user INTERPOLATION or PROPERTY BINDING (syntax’s).

INTERPOLATION

Interpolation is used when you want properties in the component to communicate with controls in the template. Interpolation can be implemented using the format {{PropertyName}} (expressions). So if you want to bind page heading information from component class, you can simply define an expression in the header section as shown below and create a property in a component class. For now, I am hardcoding the values in component class, but in later articles, we can make that information dynamic by fetching from WEB API.

Let me apply the same logic for two labels on the page (“User Email” and “User Password”) using Interpolation.

The property values are rendered dynamically based on mapped properties using Interpolation.
Similarly, we can use interpolation for

1. Performing calculations
2. String Concatenations
3. JavaScript functions (propertyname.length, propertyname.toUpperCase (), etc…)
4. Call a method in component class from a template.

However, Interpolation also has certain limitations due to which we use property bindings in some cases.
Limitations of INTERPOLATION

1. We can’t assign an expression result to a variable using INTERPOLATION.
2. We can’t access global variables like “window.location.href.”
3. Works only for string type properties.

Now let’s see another way of binding the property information from component class to template using property binding.
Let me define an ID for controls like textbox and button in the component class and map them to respective controls in a template using property binding syntax.

Here we replaced all static id’s with properties using the syntax [id] =”PropertyName” in a template and defined the property definition in component class.
Besides we can also use bind-attributename=”PropertyName.”

Why can’t we user INTERPOLATION all the time instead of property bindings?

Like I said earlier INTERPOLATION works only for string types. For example, let’s consider the above login form. In this login form, I want to disable the “Login” button until the user enters Email and Password information. So let’s not get into details about the implementation logic for enabling and disabling the button control. Instead, let’s define a flag called “IsButtonEnabled” in the component class and based on that value lets enable or disable the button control.
A general way to disable button is using the attribute disabled. By default disabled attribute value is true.

Now let’s try enabling login button using INTERPOLATION ({{ }})

Interpolation doesn’t work here as it works only for string types but not for Boolean types. Let’s enable this button using property binding now.

This is how property binding works where we can’t go with INTERPOLATION.

Class Bindings

In this section, we are going to define few classes in the styles section and bind them to control dynamically.
Here are some of the classes I have defined initially to get an understanding.

Let’s apply these classes to the controls using class binding.
The regular way of applying the class to a control

Similar to property binding, we can apply styles to controls by defining properties in component class as shown below.

We can also apply a class to control based on other property values say on a condition (true or false). Let’s create a property called “IsClassApplicable” in the component class. If the value is “true” we will set the class “style-header” to H1 tag otherwise we shall leave the control without applying any class.

Output would be

In the above example, we are applying an only single class to control based on a value of the property.
However what if we want to apply more than one class for the same control based on a condition?
For this ANGULAR has provided “ngClass” directive (A directive is nothing but custom HTML attribute that angular provides).
Here we will define two classes for heading in style section and create a property (Boolean) using which we apply any of the classes to control on property value.

I have created an object called “headerclasses” in which I provided a collection of classes which are included in an object based on property (IsItalic) value.
So in this case, since “IsItalic” value is set to false object headerclasses holds the class “style-header.”
Let’s apply this object to control using “ngClass” directive.

So the output would be

We can also apply multiple class at a time using objects. This way, we can add or remove classes to controls dynamically at runtime.
Contact us today for more information
Bhaskar Praveen Takasi – Module Lead @YASH Technologies

• ANGULAR Property Bindings
• Class Bindings
• Interpolation
• open source framework