AppDividend
Latest Code Tutorials

Angular 9/8/7 Property Binding and Interpolation Example

0

In Angular, we can bind the data through Property binding.  HTML elements have backing dom properties that track state on elements. You can use Angular’s property binding syntax to wire into those properties. You go this 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 9 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 part of 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. In practice, the <script> is completely ignored, and a warning appears in the console of the browser. It is one of the best security feature 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 a good inside the html template.

Angular 9 Interpolation and Template Expressions

Interpolation 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 as a string of content in our h tag. But not all expressions are supported. Assignments, newing up variables, expressions that are chained, and incrementors and decrementors are not valid expressions.

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 and to the browser and see the changes.

Notice that we use the property name directly in the interpolation statement without any this dot reference, or some other component instance reference. 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 9 Property Binding

Another way, you can bind the data in the templates 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 this 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>

Here, 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

From the output, we can see that Angular will translate the interpolation approach into the same property binding that the interpolation syntax did. So we can do property binding either way.

One thing to note here 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 evaluate to a type of value expected by a target property. Let’s say, if the target property expects a number, and then a number should be returned. If a target property expects a string, then the string should be returned. If a target property expects an object, then the object should be returned.

Why Use Property Binding?

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

When we are binding the element property to a non-string data value, we use the property binding. So that there will not be any 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 is used to display a component property in the respective view template with double curly braces syntax. We can show all kinds of properties data into view e.g., string, number, date, arrays, list, or map.

Property binding is the technique, which will help us to bind values to the properties of HTML elements.

Finally, Angular Property binding and interpolation example is over.

See also

Angular 9 Tutorial

Upgrade Angular CLI v9

Leave A Reply

Your email address will not be published.

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