Interpolation

Branch

You are now iterating through the tasks array but displaying a static Task value. Now what? You want to dynamically display the content of each single task instead.

What is interpolation?

Interpolation is the solution for evaluating a JavaScript expression in the HTML Template. While some of your HTML content may be static, you’ll have to display dynamic data in your view in some situations. This allows us to display the value of a property defined in a class component.

You’ll use the {{ }} delimiters to identify the expression to evaluate. You can use any valid TypeScript expression between these interpolation delimiters.

<!-- const name = 'Gerome'; -->

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

The task part of the @for loop is a reference to the current item in the list. We can use it to access the properties of the task object.

So using {{ task.title }} will display the title of the current task and {{ task.createdAt }} will display the creation date.

Instructions

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

   <table class="table">
     <thead>
       <tr>
         <th>Name</th>
         <th>Date</th>
         <th>Actions</th>
       </tr>
     </thead>
     <tbody>
       @for (task of tasks; track task.id) {
       <tr>
         <td>{{ task.title }}</td>
         <td>{{ task.createdAt }}</td>
         <td></td>
       </tr>
     </tbody>
   </table>

2. Check the changes in your browser

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

The interpolation expression can take any property defined in the template, such as our task here or properties defined in the related component class.

• Official Angular Documentation: interpolation