Learn Angular Interpolation in detail with examples

Angular Interpolation is a very simple and fundamental concept of this framework. It is denoted by double-curly braces, {{ and }}. This should be used to include any calculated strings into the text between HTML element tags and within attribute assignments.

Below is a sample HTML element that use interpolation to output the value of `description` member of an object named `post` into the paragraph text.

<p>This is a post that explains {{ post.description }}</p>

<img src="{{postImageUrl}}" style="height:30px">

Angular is smart enough to identify whether the text/material inside the braces is the name of a  component property or not. If it is, Angular replaces that name with the value of that property. So, based on the HTML above, Angular evaluates the text inside the braces and then replaces it with proper values.

Template Expression

The text/material inside the braces is a template expression that Angular first evaluates and then convert the value to a string. Another example is show below where Angular is smart enough to evaluate the expressions first, particularly addition or multiplication or evaluation a method in this case and then once its done, Angular converts it to string.

<p>The multiplication of 2 * 4 is {{2 * 4}}</p>

<p>This is dynamic: {{4 + 4 + getRandomValue() }}</p>

Try out the code above in the demo below:

I hope you now understand Angular Interpolation in detail with examples. If you would like to learn more about Angular then please checkout my other posts.