Skip to content
Angular Tutorials

Interpolation

Chapter Objectives

  • ✔️
    Interpolation
    Learn how to render data in a view (HTML Template) using interpolation.

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 the component.ts file in the HTML Template.

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

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

🎓 Instructions

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

    <table class="table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Date</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let task of tasks">
    

          <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.

✔️ What you have learned

Interpolation is one of Angular’s most common features. You’ll use it in almost every component to display dynamic data.

🔗 Resources