This tutorial lesson demonstrates how to add interpolation to Angular templates in order to display dynamic data in a template.
Time required: expect to spend about 10 minutes to complete this lesson.
This lesson starts with the code from the previous lesson, so you can:
If you haven't reviewed the introduction, visit the Introduction to Angular tutorial to make sure you have everything you need to complete this lesson.
If you have any trouble during this lesson, you can review the completed code for this lesson, in the live example for this lesson.
HousingLocationComponent
template.In lesson 6, you added data binding to the template to enable developers to pass data from the HomeComponent
to the HousingLocationComponent
. The next step is to display values (properties and Input
values) in a template. In order to accomplish this task you have to use interpolation.
The Angular template syntax supports mixing static template content with dynamic values and expressions.
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.
Perform these steps on the app code in your IDE.
HousingLocationComponent
template to include interpolated valuesThis step adds new HTML structure and interpolated values in the HousingLocationComponent
template.
In the code editor:
Navigate to src/app/housing-location/housing-location.component.ts
In the template property of the @Component
decorator, replace the existing HTML markup with the following code:
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.
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:
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.
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/first-app/first-app-lesson-07