Angular Property Binding

Back to: Angular Tutorials For Beginners and Professionals

Angular Property Binding with Examples

In this article, I am going to discuss Angular Property Binding with examples. Please read our previous article where we discussed Angular Interpolation with some different kinds of examples. In our Angular Interpolation article, we discussed that we can use the Angular interpolation technique to bind the component class properties to the view template. We can also achieve the same thing by using the Property binding technique. So, at the end of this article, you will understand the following pointers.

1. What is Angular Property Binding?
2. How to use Property Binding in Angular Application?
3. Different kinds of examples to understand Property Binding.
4. What are the differences between Property Binding and Interpolation?
5. Working with non string data.
6. Angular Interpolation with Boolean data
7. Providing Security to Malicious Content

What is Angular Property Binding?

The Property Binding in Angular Application is used to bind the values of component or model properties to the HTML element. Depending on the values, it will change the existing behavior of the HTML element. The syntax to use property is: [property] = ‘expression’

In Property Binding, there is a source and target. For example, consider the below span tag.

span[innerHTML] = ‘FirstName’.

Here, innerHTML is the target that is a property of span tag and FirstName is the source that is the component property.

How to use the Property Binding in Angular Application?

In order to understand how to use property binding in the angular application, please have a look at the following image. As you can see in the below image, you need to specify the HTML element property (in our example, the HTML element is span and the property is innerHTML) in a pair of the square brackets. Then you need to specify the component class property (in our example, the component class is AppComponent and the property is Title) in a pair of single quotes. Then at runtime, this property value will be assigned to the HTML Property.

So, please modify the app.component.ts file as shown below to use the property binding to bind the component property values to the HTML elements property.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
    template: `<div>
                    <span [innerHTML] = 'Title' ></span>   
               </div>`
})

export class AppComponent {
  Title : string = "Welcome to Angular Tutorials";
}

Now, save the changes and have a look at the browser and you should get the output as expected as shown in the below image.

In this way, you can use property binding in angular application.

Achieving the same thing using Angular Interpolation and Property Binding:

At the start of this article, we had made one point that we can achieve the same thing using property binding as we achieve using Angular Interpolation. In our previous article, we use the following code to bind component class ImagePath property to the <img> element’s src property using the interpolation technique.

Now, let’s see how we can achieve the same thing using Property Binding. With property binding what you need to do is, you need to specify the src property of the image element in a pair of the square brackets and then you need to specify the ImagePath property of the component class in a pair of the single quotes as shown in the below image.

So, modify the app.component.ts file as shown below and see the output in the browser which should the image as expected.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
    template: `<div>
                    <img [src] = 'ImagePath' />                
               </div>`
})
export class AppComponent {
  ImagePath : string = "https://dotnettutorials.net/wp-content/uploads/2019/09/cropped-dotnettutorials.png";
}

Note: The Angular Interpolation and Property binding both flows the values from a component to the view template i.e. in one direction.

Now, you may have one question i.e. we can achieve the same thing using both property binding and angular interpolation, then what is the difference between them or when to use one over another.

What is the difference between Property Binding and Angular Interpolation?

Interpolation in Angular is just an alternative approach for property binding. It is a special type of syntax that converts into a property binding. 

But there are some scenarios where we need to use interpolation instead of property binding. For example, if you want to concatenate strings then you need to use angular interpolation instead of property binding as shown in the below image.

Working with non-string (Boolean) data:

When you are working with non-string values like Boolean to set the property value of an HTML element, then you need to use property binding instead of interpolation. For example, if you want to disable a button click event, then you need to set the disabled property of the button element using the property binding as shown in the below code.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
    template: `<div>
                    <button [disabled] = 'IsDisabledClick' > Cick Here </button>              
               </div>`
})
export class AppComponent {
  IsDisabledClick : boolean = true;
}

With the above changes in place, it will display the button in the browser which is not clickable. Let see what happens if we use angular interpolation.

Angular Interpolation with Boolean data:

Please modify the app.component.ts file as shown below to use angular interpolation to set the disabled property of the button element. Here, we set the property value to false.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
    template: `<div>
                    <button disabled = {{IsDisabledClick} > Cick Here </button>              
               </div>`
})
export class AppComponent {
  IsDisabledClick : boolean = false;
}

With the above changes in place, irrespective of the IsDisabledClick property value of the component class, the button is always disabled. Here we set the IsDisabled property value as false but when you run the application, it will not allow the button to be clickable.

Providing Security to Malicious Content:

From the security point of view, both Angular data binding and Angular Interpolation protect us from malicious HTML content before rendering it on the web browser. Let us understand this with an example. In the following example, we are using angular interpolation to bind the malicious <script> tag.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
    template: `<div>
                    {{MaliciousData}}           
               </div>`
})
export class AppComponent {
  MaliciousData : string = "Hello <script>alert('your application is hacked')</script>";
}

Now, when we run the application, the Angular interpolation sanitizes the malicious content and displays the following in the browser.

In the below example we are using property binding. 

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
    template: `<div [innerHTML] = 'MaliciousData'>         
               </div>`
})
export class AppComponent {
  MaliciousData : string = "Hello <script>alert('your application is hacked')</script>";
}

The Property Binding handles the malicious HTML content in a slightly different manner and when you run the application, you will get the following output in the browser. But the most important point that you need to keep in mind is, both property binding and interpolation protect us from malicious HTML content.

In the next article, I am going to discuss the HTML Attribute vs DOM Property in angular. Here, in this article, I try to explain Angular Property Binding with some examples. I hope this article will help you with your needs. I would like to have your feedback. Please post your feedback, question, or comments about this article.