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
1import { Component } from "@angular/core";
2@Component({
3 selector: 'app-example',
4 template: `
5 <div>
6 <input [value]='myText'></span>
7 </div>
8 `
9})
10export class AppComponent {
11 myText: string = "Hello World";
12}
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.
1import { Component } from "@angular/core";
2@Component({
3 selector: 'app-example',
4 template: `
5 <div>
6 <button [disabled] = "isDisabled">Button disabled!</button>
7 </div>
8 `
9})
10export class AppComponent {
11 isDisabled: boolean = true;
12}
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
1<div [ngClass]="myClass">Binding ngClass to the myClass property</div>
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.
The following are couple of the most useful reasons why we should use property binding.
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.
1<span [innerHTML]='Hello World!'></span>
We can also use the alternative canonical form 'bind-prefix' to bind the property.
1<span bind-innerHTML='Hello World!'></span>
The following are some of the things to avoid while using property binding.
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
1export class Person{
2 name: string;
3 address: string;
4}
File Name: app.component.ts
1import { Component } from "@angular/core";
2import { Person } from '../person';
3
4@Component({
5 selector: 'app-root',
6 template: `
7 <div>
8 <app-example [person]="personName"></app-example>
9 </div>
10 `
11})
12export class AppComponent {
13 personName: Person;
14}
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".
1<app-example person="personName"></app-example>
You can omit the brackets when all of the following conditions meet:
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.
1<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.
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
1import { Component } from "@angular/core";
2
3@Component({
4 selector: 'app-example',
5 template: `
6 <div>
7 <<span [innerHTML]="scriptText"></span>
8 </div>
9 `
10})
11export class ExampleComponent {
12 scriptText = 'Template <script>alert("Text with script tag!")</script>Syntax';
13}
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".
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.