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
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
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
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!
Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.