Interpolation {{}} in Angular in detail

Everything you need to know about binding by interpolation of strings in Angular, generated with the syntax of the double braces {{}}.

With this article we begin a series of installments in which we are going to address different aspects of binding in this framework. They are important, because despite being basic things, we often let them go and that ignorance ends up creating confusion later on.

In any case, we are not going to explain everything from scratch, since we have already known the bases of data-binding in previous articles in the manual. Specifically, it is interesting that you have read the article about the .

In this article we are going to cover a lot of things about interpolation in Angular that we may have taken for granted in previous articles and that are worth covering in detail and clearly.

What is string interpolation

String interpolation, also known in English as “string interpolation”, or simply as interpolation, is Angular’s mechanism of replacing an expression with a string value in a template.

When Angular sees something written between double braces {{}} in a template, it evaluates it and tries to convert it to a string, and then dumps it into the template.

This is an interpolation case of {{someString}}

That means to Angular that it must override a component property called “someString” and place its value as is in the template.

If “someString” is a string, it will simply write its value to the template, but if that wasn’t a string it will try to place it so that it was. For example, if it had a numeric value, it would place the number as it is in the template.

You can also use interpolation as the value of properties of HTML elements, as in the following case.

In this case, the value of the urlImagen property will be placed as src for the IMG element.

Interpolation is dynamic. It means that, if you change the value of the component property, Angular will work to change all the places where that property is being used, which would change the text that is written in the previous paragraph, or it would change the image that is being displayed in the previous IMG element.

Expressions, between the double braces

What is placed between the double braces are called expressions. We can create simple and complex expressions and Angular will do the job of evaluating them before dumping the result into the template.

What is important is that the evaluation of the expression must be converted to a string before being dumped into a template. That is, any expression will eventually be converted to a string and that is what will be placed in the component’s view.

An expression can be something as simple as a component property, like the ones used earlier in this article.

{{someString}}

That simple expression evaluates to the value of the someString property and dumps it into the template.

We can also see expressions with mathematical operations.

{{ 1+ 1 }}

Expressions with logical negation operator:

{{ ! booleanvalue)

Even expressions whose value is calculated by a method of the component.

{{ componentMethod() }}

Whatever that method of the component returns is what will be placed in the template. That method will be re-executed every time the component’s state changes, that is, every time one of its properties changes, always producing updated output.

Note: although we are going to insist on this point and it will be better understood if you continue reading the article, it must be said that this method has to be limited to producing output and also be simple and fast to execute. This will avoid negatively affecting the performance of the applications. The reason is simple: if during the execution of the application the properties of the component are modified, Angular will re-execute that method, updating the output accordingly. This will be done before any small change in the component, and not only before changes in the properties with which the method works, it will even occur only because an event capable of modifying the state has occurred. If you put code in the method that takes time to execute, as there are many repeated calls to this method, the cost of execution time will multiply, causing the application to drop in performance and negatively affecting the user experience.

Side effects are prohibited in expressions

Interpolation in Angular is a one-way binding. When the values ​​in the component change, they travel to the template, causing the view to update.

The tween should not produce changes in the other direction, ie modify something in the view affecting the state of the component. In other words, expressions should never contain statements that can produce side effects. That is, code that can affect changes in component properties.

Keep in mind that the expressions have the utility of returning a string to be dumped in the component’s template, so you should not place business logic in them, manipulating variables or state properties of the component or the application.

Due to this detail, some operators are prohibited in expressions, for example those of assignment, increments, decrements, etc. For example, never do something like this:

{{ booleanValue = false }}

If Angular sees an expression with operations capable of performing side effects, it will return an error, like the one you see in the following image:

For this same reason, when you call a method within an expression, you should not modify component data capable of producing side effects in that method’s code, but simply limit yourself to producing an output.

{{ methodProduceSideEffects() }}

In the case that metodoProduceEfectosLaterales() has code that produces changes in the state of the Angular component, it will not warn you and it will execute the method without producing any error message, but even so you should not do it. It is not only to stick to good practices, but because Angular will not take into account that change in the state of the component to trigger other necessary operations, which can cause your templates not to show the changes in properties or other undesirable effects.

Other considerations in expressions

Other things that are good to know when using expressions are the following:

• The expressions have as context the component of the template that is being developed. But they can’t access global context, like global variables or objects like document or window. Neither to browser stuff like console.log().
• You cannot write control structures, such as if, for, etc. statements.
• The execution of an expression must be direct. For example, you won’t be able to make a REST API be queried in an expression.
• Keep it simple. Things like using a negation in the expression is fine, but if what you have to put in is some complex logic, then you should use a method on the component.
• Always return the same result with the same input values. This is known as idempotent expressions, those that executed several times always give the same result. Obviously, if the input is different and the data used to calculate the value of the expression changes, the result will also change, but it will still be idempotent if with the same set of input values ​​we always get the same output. This is necessary for Angular’s change detection algorithms to work properly.