Angular Property Binding and Interpolation: Complete Guide

In Angular, we can bind the data through Property binding. HTML elements have backing dom properties that track the state of elements. 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.

Angular Template Syntax

The Angular application manages what a user sees and can do, achieving this through every interaction of the component class instance (component) and its user-facing template.

You may know the component/template duality from your experience with the programming paradigm model-view-controller (MVC) or model-view-viewmodel (MVVM).

In Angular, a component plays the controller/viewmodel, and the template represents the view.

Angular template syntax is made of the following things.

  1. Interpolation
  2. Property binding
  3. Template expressions
  4. Conditional Templating
  5. Template variables
  6. Template Expression operators

HTML in templates

HTML is a language of the Angular template. It does not use JSX like React.js. Almost all HTML syntax is the valid template syntax.

The <script> element is the notable exception; it is forbidden, eliminating the risk of script injection attacks. The <script> is wholly ignored in practice, and a warning appears in the browser’s console. Nevertheless, it is one of the best security features provided by the angular.

Some regular HTML doesn’t make much sense in the template like <html>, <body>, and <base> elements have no useful role. Pretty much everything else is good inside the html template.

Angular Interpolation and Template Expressions

Interpolation in Angular is getting the data displayed inside the view. Interpolation allows you to combine calculated strings into the text between the HTML element tags and within the attribute assignments. Template expressions are what you use to calculate those strings.

Interpolation refers to embedding expressions into marked-up text. By default, interpolation uses its delimiter, the double curly braces, {{ and }}.

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

<!-- app.component.html -->

<h2> Angular 9 Interpolation </h2>
<p>{{ 19 + 21 }}</p>

Save that file and go to the browser: http://localhost:4200.

Output

 

Angular 9 Interpolation

Angular evaluate that to 40 and renders it a string of content in our h tag. But not all expressions are supported. For example, assignments, newing up variables, chained expressionsand increments and decrements are invalid.

Now, let’s add component class property inside the app.component.ts file.

// 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';
}

In the above code, we have defined a property called content.

Now, add the following code inside the app.component.html file.

<!-- app.component.html -->

<h2> Angular 9 Interpolation </h2>
<p>{{ content }}</p>

Save the file to the browser and see the changes.

We use the property name directly in the interpolation statement without this dot reference or other component instance reference. This is because angular makes all properties on the component class available to the template when it processes it. 

So back in the browser, we can see that the name text gets rendered in the h tag. This component property is made available via what is known as the expression context. Methods on the component class are also available in the expression context.

We can do the same for the function as well. Define the function inside the component class and then call it inside the curly braces. It will print the return value of the function.

// 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';

  thisIsIt() {
    return 'MJ';
  }
}

Then write the following code inside the app.component.html file.

<h2> Angular 9 Interpolation </h2>
<p>{{ thisIsIt() }}</p>

Output

 

Angular Interpolation

Angular Template Expressions

The template expression produces the value and appears within the double curly braces, {{ }}. Angular executes an expression and assigns it to a property of the binding target; the target could be the HTML element, a component, or a directive.

The interpolation braces in {{19 + 21}} surround the template expression 19 + 21. In the property binding, the template expression appears in quotes to the right of the = symbol as in [property]=”expression”.

In the syntax, template expressions are similar to JavaScript.

Many JS expressions are legal template expressions, with a few exceptions.

For example, you can’t use the JS expressions that have or promote side effects, including:

  1. Operators such as new, typeof, instanceof, etc.
  2. Chaining expressions with; or,
  3. Assignments (=, +=, -=, …)
  4. The increment and decrement operators ++ and —
  5. Few ES2015+ operators

Other major differences from JS syntax include:

  1. No support for the bitwise operators such as | and &
  2. New template expression operators, such as |, ?. and!

Angular Property Binding

Another way you can bind the data in the templates is using Property binding.

HTML elements have backing dom properties that track state on 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.

See the following code inside the app.component.ts file.

// 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';
}

Now, write the following code inside the app.component.html file.

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

We have used the HTML property called textContent and bind 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 are binding 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.

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.

Conclusion

Angular interpolation displays a component property in the view template with double curly braces syntax. Thus, we can show all properties data into view, e.g., string, number, date, arrays, list, or map.

Property binding is the technique that will help us bind values to HTML elements’ properties.

That’s it for this tutorial.

See also

Angular Tutorial

Upgrade Angular CLI

Leave a Comment

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