Property Binding in Angular

Jan 18, 2019 • 6 Minute Read

Introduction

Property binding is a technique, which will help to bind values to the properties of HTML elements.

Syntax: [property]

Let's consider an example where we are binding the value property of the input element to a component's myText property.

File Name: example.component.ts

          import { Component } from "@angular/core";
@Component({
   selector: 'app-example',
  template: `
              <div>
              <input [value]='myText'></span>       
              </div>
              `
})
export class AppComponent {
  myText: string = "Hello World";
}
    

Let's consider another example where we are binding the disabled property of the button element to a component's isDisabled property. This will disable the button based on the condition either it's true or false.

          import { Component } from "@angular/core";
@Component({
   selector: 'app-example',
  template: `
              <div>
              <button [disabled] = "isDisabled">Button disabled!</button>
              </div>
              `
})
export class AppComponent {
  isDisabled: boolean = true;
}
    

Let’s explore another example of setting the property of an Angular directive. In this case, we are setting the Angular directive ngClass property to a component's myClass property. Based on different conditions, it can add or remove a class

      <div [ngClass]="myClass">Binding ngClass to the myClass property</div>

One-way Data Binding Using Property Binding

One-way data binding will bind the data from component to the view (DOM) or from view to the component using property binding. One-way data binding is unidirectional. It flows a value in one direction, from a component's data property into a target element property.

You can learn more about one-way binding in my guide One-way and Two-way Data Binding in Angular.

Why Use Property Binding?

The following are couple of the most useful reasons why we should use property binding.

Property binding helps you to bind the values to the target property of the element property enclosed within the square brackets.

Let's consider an example where we are binding the value "Hello World!" to the span element's innerHTML property. In this case, the target property is innerHTML.

      <span [innerHTML]='Hello World!'></span>

We can also use the alternative canonical form 'bind-prefix' to bind the property.

      <span bind-innerHTML='Hello World!'></span>

When we are binding an element property to a non-string data value, we use property binding. So that there will not be any change in the type of object we are binding to the view and the value that we have passed from the component. For easy readability, we can use the interpolation technique.

What to Avoid During Property Binding

The following are some of the things to avoid while using property binding.

When we are binding a method or function to property binding, that method may change a value in the component. Angular may or may not display the changed value. It may detect the change, but will throw a warning error.

When using property binding, make sure that your displayed values match.

The value within the template expression should evaluate to the type of value expected by the target property. Let's say the target property expects a number, then the number should be returned. If the target property expects a string, then string should be returned. If the target property expects an object, then the object should be returned.

Let's consider an example of ExampleComponent. Here the person property of the AppExample component expects an object of type person needs to be bound to it.

File Name: person.ts

          export class Person{
   name: string;
   address: string;
}
    

File Name: app.component.ts

          import { Component } from "@angular/core";
import { Person } from '../person';

@Component({
   selector: 'app-root',
   template: `
              <div>
              <app-example [person]="personName"></app-example>
              </div>
              `
})
export class AppComponent {
  personName: Person;
}
    

Don't forget to put brackets around the property during property binding. Brackets will tell Angular to evaluate the template expression. If you forget to use brackets, then Angular will treat the string as a constant and initialize the target property with that string. It will not evaluate the string.

Let's consider an example: If we don't use brackets during property binding, then we will get an error "person expects a Person object, not the string personName".

      <app-example person="personName"></app-example>

You can omit the brackets when all of the following conditions meet:

The target property accepts a string value.
The string is a fixed value.
The initial value never changes.

Let's consider an example, where we are initializing the value property of the ExampleComponent to a string "Hello World!", not a template expression. Angular sets this fixed string value only once and forgets about it.

      <app-example value = "Hello World!"></app-example>

Whenever we are binding element property to a non-string value, then we must use property binding. Otherwise, Angular will not be able to identify the type of data value that we are trying to bind to the DOM.
Angular will not allow the script tags to be placed in the HTML. It may lead to the leaks into the HTML and can cause a security issue. Both property binding and interpolation are not allowed within the HTML.

Let's consider an example, where we are a binding value from component to the view containing the script tag as shown below.

File Name: example.component.ts

          import { Component } from "@angular/core";

@Component({
   selector: 'app-example',
   template: `
              <div>
              <<span [innerHTML]="scriptText"></span>
              </div>
              `
})
export class ExampleComponent {
 scriptText = 'Template <script>alert("Text with script tag!")</script>Syntax';
}
    

Angular will sanitize the values before rendering them to the view. In the above case, Angular will throw a warning "sanitizing HTML stripped some content".

Conclusion

In this guide, we have explored the property binding technique of the Angular. We have also seen why we should use property binding and what we should avoid during property binding.