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.

Lesson 7 - Add an interpolation to a component’s template

This tutorial lesson demonstrates how to add interpolation to Angular templates in order to display dynamic data in a template.

Estimated time: ~10 minutes

Starting code: live example / download example

Completed code: live example / download example

What you'll learn

  • Your app will display interpolated values in the HousingLocationComponent template.
  • Your app will render a housing location data to the browser.

Conceptual preview of interpolation

In this step you will display values (properties and Input values) in a template using interpolation.

Using the {{ expression }} in Angular templates, you can render values from properties, Inputs and valid JavaScript expressions.

For a more in depth explanation, please refer to the Displaying values with interpolation guide.

Step 1 - Update HousingLocationComponent template to include interpolated values

This step adds new HTML structure and interpolated values in the HousingLocationComponent template.

In the code editor:

  1. Navigate to src/app/housing-location/housing-location.component.ts

  2. In the template property of the @Component decorator, replace the existing HTML markup with the following code:

    Update HousingLocationComponent template
          
          template: `
      <section class="listing">
        <img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of {{housingLocation.name}}">
        <h2 class="listing-heading">{{ housingLocation.name }}</h2>
        <p class="listing-location">{{ housingLocation.city}}, {{housingLocation.state }}</p>
      </section>
      `,
        

    In this updated template code you have used property binding to bind the housingLocation.photo to the src attribute. The alt attribute uses interpolation to give more context to the alt text of the image.

    You use interpolation to include the values for name, city and state of the housingLocation property.

Step 2 - Confirm the changes render in the browser

  1. Save all changes.
  2. Open the browser and confirm that the app renders the photo, city and state sample data.

Lesson review

In this lesson, you added a new HTML structure and used Angular template syntax to render values in the HousingLocation template. Now, you have two important skills:

  • passing data to components
  • Interpolating values into a template

With these skills, your app can now share data and display dynamic values in the browser. Great work so far.

If you are having any trouble with this lesson, you can review the completed code for it in the live example / download example.

Next steps

For more information about the topics covered in this lesson, visit:

Last reviewed on Tue Jul 11 2023