Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of 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 Fri Sep 01 2023