Add an interpolation to a component’s template

[JorisSchelfaut]

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.

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:

3. Update HousingLocationComponent template

     template: `
       <section class="listing">
         <img
           class="listing-photo"
           [src]="housingLocation.photo"
           alt="Exterior photo of {{ housingLocation.name }}"
           crossorigin
         />
         <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.

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.