In Angular, property binding is a process of updating the value of a property in the component and binding it to an element in the view template. Property binding uses the [] syntax for data binding.
Property binding is one-way binding, which means if the value of the component changes, the view changes, but if you change the value of the dom element in the view, it does not reflect on the component value.
When property binding is helpful?
- Boolean values: Property binding is helpful for boolean properties, such as disabled, checked, etc.
- Expressions: You can use any valid Angular expression in the property binding, including method calls, arithmetic operations, and ternary operators.
- Safe Navigation Operator: Use the safe navigation operator (?.) to avoid errors when dealing with potentially undefined properties.
Syntax
<element [property]= 'typescript_property'>
Example 1: Simple demo
Add the following code in the src/app/app.component.ts file:
import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './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 Property binding</h2> <p textContent="{{ content }}"></p>
We bound the HTML property textContent to the component class property content.
Save the file and start the development server using the ng serve –open command:
Output
The output shows that Angular will translate the interpolation approach into the same property binding as the interpolation syntax. 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 that 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
Add the following code inside the src/app/app.component.html file:
<h2>Angular Property binding</h2> <img [src]='src' style="margin-left: 30px;">
Write the below code inside the app.component.ts file.
import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent { src = 'https://picsum.photos/200/300'; }
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'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent { bool = true; }
Output
If you change the bool value from true to false, the button will be enabled.
// app.component.ts import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent { bool = false; }
Here is the output of the enabled button:
That’s all!