Property Binding In Angular

The Code Points May 25, 2022 0

In this article, we learn about Property Binding in Angular using examples. Property binding is one method of connecting a component to a view. It allows you to map a view element's property to a component property. Property binding can be used to set properties such as class, href, src, textContent, and so on. It can also be used to set the properties of custom components or directives (properties with the @Input prefix).

Property Binding Syntax

The following syntax is used in the Property Binding.

[binding-target]=”binding-source”

A square bracket [] surrounds the binding-target (or target property). It should be the same as the name of the surrounding element's attribute.

We encapsulate binding-source in quotations and assign it to binding-target. A template expression must be used as the binding source. It can be a component property, a component method, a template reference variable, or an expression that contains all of them.

Angular updates the view whenever the value of Binding-source changes.

Property Binding Example:

Create a new application using following command:

ng new property-binding

Now, open the app.component.html and add the following code:

<h1 [innerText]="title"></h1>
<h2>Example 1</h2>
<button [disabled]="isDisabled">I am disabled</button>

Now, open the app.component.ts and add the following code:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title="Angular Property Binding Example"
  
  //Example 1
  isDisabled= true;
 
}

In the preceding example, we have two property bindings.

The h1 tag's innerText property is connected to the component class's title property. Disabled The is connected to the button's property. Disabled The component's property

Angular automatically refreshes the view if the title or isDisabled component is changed.

One Way Property Binding

Property binding only works in one direction, with values flowing from the component to the template. Angular changes the view when the component values change. However, Angular does not update the component if the values in the view change.

The app's state should not be changed

To read the values from the component, Angular analyses the template expression (binding-source). The vision is then filled. The view would be inconsistent with the model if the expression changed any of the component values. As a result, we must avoid using expressions that change the state of the component.

That means you cannot use of the following:

Assignments (=, +=, -=, …)
Keywords like new, typeof, instanceof, etc
Chaining expressions with ; or ,
The increment and decrement operators ++ and --
bitwise operators such as | and &

Property name must be Camel case

The camel case has few element property names, but none of their related attributes. For example, the table's rowSpan and colSpan parameters are in the camel case. All HTML attributes are capitalised (rowspan & colspan)

Attribute Binding

There may be situations when there are no HTML element properties to bind to. aria (accessibility) attributes and SVG are two examples. You can utilize attribute binding in these situations.

As demonstrated below, the attribute syntax begins with attr, followed by a dot, and then the name of the attribute.

Now, open the app.component.html and add the following code:

//Setting aria label
<button [attr.aria-label]="closeLabel" (onclick)="closeMe()">X</button>
 
//Table colspan
<table border="1">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
  <tr>
      <td [attr.colspan]="2">Col 1 & 2</td> 
      <td>Col 3</td>
  </tr>
  <tr>
      <td>Col 1</td>
      <td bind-attr.colspan = "getColspan()">Col 2 & 3 </td>
  </tr>
  <tr>
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  
</table>

Now, open the app.component.ts and add the following code:

closeLabel="close";
getColspan() {
   return "2"
}

Difference between Property Binding and Interpolation

Everything that is possible with interpolation is also possible with Property binding. Interpolation is actually a shortcut for binding to an element's textContent attribute.

For instance, consider the following interpolation.

<h1> {{ title }} </h1>

Is the same as this Property binding

<h1 [innerText]="title"></h1>

Before rendering the view, Angular automatically converts interpolations into the correct property bindings.

Interpolation is easy to understand. For example, in interpolation is more logical and understandable than property binding syntax when establishing the h1 tag.

Examples:

Binding to innerHTML with HTML tags

The b &p tags are parsed by Angular and rendered in the view.