Interpolation

• ✔️
  Interpolation

  Learn how to render data in a HTML template using interpolation.

You are now iterating over the tasks array but displaying a static Task value. You now want to display the actual task instead.

What is interpolation?

Interpolation is the solution to render a JavaScript expression in the HTML template. While some of your html content is static, you may want to display dynamic data in your HTML template. It allows us to display the actual value of a property defined in the component.ts file in the HTML template.

That’s our situation: you want to display the details of each task!

You use {{ }} delimiters to identify the expression you want to evaluate. You can use any valid TypeScript expression within the interpolation delimiters.

<div>{{ name }}</div> => Gerome
<div>{{ 1 + 1 }}</div> => 2
<div>{{ 'Hello ' + name }}</div> => Hello Gerome

🎓 Instructions

1. Update the src/app/task-list.component.html file.

   <ul>
       <li *ngFor="let task of tasks">
   
       {{ task.title }} - {{ task.createdAt }}
       </li>
   </ul>

2. Check the changes in your browser:

   // TODO: Add image

The interpolation evaluates the task.title and task.createdAt properties and displays the values in the browser.

✔️ What you learned

Interpolation is one of the most common Angular features. You’ll use it in almost all HTML templates to display dynamic data.

🚦 Quiz

What is the interpolation syntax in Angular?

• `{{ task.title }}`
• `[task.title]`
• `(task.title)`
• `task.title`

Submit

🔎 Want to learn more?

• Official Angular interpolation documentation