Property Binding in Angular

In Angular property binding, we bind a property of a DOM element to a field, a defined property in our component TypeScript code. Angular internally converts string interpolation into property binding.

HTML elements have backing dom properties that track the state of elements, for example, textContent.

You can use Angular’s property binding syntax to wire into those properties. You go with a specific syntax—a pair of square brackets around a property name on an element. And you set these equal to a template expression.

Syntax

<element [property]= 'typescript_property'>

Example 1: How to Use Property Binding in Angular

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  content = 'This is really a final curtain call';
}

Write the following code inside the app.component.html file.

<h2>Angular 9 Property binding</h2>
<p textContent="{{ content }}"></p>

We used the HTML property called textContent and bound that property with the component class property content. Now save the file and go to the browser.

Output

 

Angular 9 Property binding

The output shows that Angular will translate the interpolation approach into the same property binding as the interpolation syntax did. So we can do property binding either way.

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

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

The value within a template expression should be evaluated as a value expected by a target property. For example, if the target property expects a number, then a number should be returned. If a target property expects a string, the string should be returned. Finally, if a target property expects an object, the object should be returned.

Example 2: Getting the source of the image using property binding

<img [src]='src'>

Write the below code inside the app.component.ts file.

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

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

export class AppComponent {
  src = 'https://appdividend.com/data.png';
}

Output

Getting the source of the image using property binding

Example 3: Disabling the button

Write the below code inside the app.component.html file.

<button [disabled]='bool' style="margin-top: 20px;">Button</button>

And write the below code inside the app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  boolVal = 'true'
}

Output

Disabling the button

Why Use Property Binding?

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

When we bind the element property to a non-string data value, we use the property binding so that there will be no change in the type of object that we are binding to a view and the value that we have passed from a component.

That’s it!

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.