Component Destruction

Chapter Objectives

• ✔️
  Learn how component destruction works

  Understand what happens when you leave a component in an Angular application.

When you submit the form, the task property of TaskFormComponent is populated with the values you entered in the form. For example, given that you filled in the name and description fields, the task property will be:

task = {
  title: "My new task",
  description: "Your nice description.",
};

By submitting the form and navigating to a new page, you also leave the TaskFormComponent. When you leave a component, it is destroyed.

Thus, when navigating back to this form, the task property will be empty:

task = {
  title: "",
  description: "",
};

A new instance of the TaskFormComponent is created each time you access it. Therefore, any local state you define in the component is lost when you navigate to another route.

Tip

This is why you use the TaskService to store the new task. The service is a singleton, meaning it’s a unique instance shared across the application. Unless you force the application to reload in the browser, the tasks you’ve added will be preserved.

✔️ What you’ve learned

In this chapter, you learned how component destruction works in an Angular application.