angular/aio/content/guide/interpolation.md

Displaying values with interpolation

Prerequisites

• Basics of components
• Basics of templates
• Binding syntax

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:

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

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.

What's Next

• Property binding
• Event binding

@reviewed 2022-04-14