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.

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.

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.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

You may also like...

Advertisment ad adsense adlogger