W3cubDocs

/Angular

Displaying values with interpolation

Prerequisites

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

To illustrate how interpolation works, consider an Angular component that contains a currentCustomer variable:

currentCustomer = 'Maria';

Use interpolation to display the value of this variable in the corresponding component template:

<h3>Current customer: {{ currentCustomer }}</h3>

Angular replaces currentCustomer with the string value of the corresponding component property. In this case, the value is Maria.

In the following example, Angular evaluates the title and itemImageUrl properties to display some title text and an image.

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

What's Next

Last reviewed on Thu Apr 14 2022

© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/guide/interpolation