Technology

[ANGULAR] Property Bindings, Interpolation and Class Bindings

Publish Date: March 5, 2018

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.
ngaap-img1

 

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.
ngaap-img2

 

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.
ngaap-img3

 

ngaap-img4

 

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

 

ngaap-img6

 

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.
ngaap-img7

 

ngaap-img8

 

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.”

 

ngaap-img9

 

ngaap-img10

 

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.
ngaap-img11

 

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

 

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.
ngaap-img13

 

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.
ngaap-img14
Let’s apply these classes to the controls using class binding.
The regular way of applying the class to a control
ngaap-img15
Similar to property binding, we can apply styles to controls by defining properties in component class as shown below.
ngaap-img16
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.
ngaap-img17
Output would be
ngaap-img18
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.
ngaap-img19
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.
ngaap-img20
So the output would be
ngaap-img21
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

Bhaskar Praveen Takasi
Bhaskar Praveen Takasi

Module Lead @YASH Technologies

More From Author.

Related Posts.

Microsoft , Microsoft Azure
Embedded System Networks , Internet Of Things , IoT
RPA , RPA Adoption , RPA Advantages
Banking On RPA , Delivering RPA Pilot , RPA , RPA Adoption , RPA Advantages
Analytics , Application Support , Artificial Intelligence , Cloud Computing , DevOps , Enterprises Modernization
Machine Learning , ML , S/4HANA , SAP , Technology
Applications , Mobile First , SAP , SAP Fiori , Technology

A fiery evolution of Fiori

Srihari Tummala

Apache , Cordova Plugin , Mobile Development Framework , Mobility , Technology
COVID-19 , Health And Sciences , Healthcare , Technology
Digitalization , Impact Of Covid-19 Crisis , New Normal , SURVIVE To THRIVE

From SURVIVE to THRIVE

Michael Nelapati

Enterprise Applications , Integration And API Platform , MuleSoft , SaaS

Add Comments