Handle an Empty List

Chapter Objectives

• Handle an empty list

  Learn how to handle an empty task list in your Angular application.

You’ve just learned how to delete a task from the list, now you want to display a message when the list is empty.

The @if Controlf Flow syntax

To iterate over the task list, you used @for from the Control Flow feature.

Another feature from the Control Flow is the @if directive. It allows you to condition the display of an element in the view.

By giving it a condition, the element is only displayed if the condition is true.

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

   task-list.html

   
     @if (!tasks().length) {
     <p class="my-5 text-center">No tasks</p>
     }

Let’s test it!

1. Delete all tasks from the list.
2. The message “No tasks” should appear.

What you've learned

In this chapter, you explored how to use the @if (control flow) to conditionally display tasks.