Component destruction

• ✔️
  Understand Component destruction

  Learn what happens when you navigate away from a component in an Angular application.

At the time you submit the form, the TaskFormComponent task property is populated with the values you entered in the form. For example, given you filled the name and description fields, the task will look like:

task = {
  title: 'My new task',
  description: 'Awesome description'
};

Thanks to the last chapter, by submitting the form, you navigate away from the TaskFormComponent component. When you navigate away from a component, the component is destroyed.

So by navigate once again to this form, the task property will be empty:

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

A new instance of the TaskFormComponent component is created each time you navigate to it. So any local state you set in the component is lost when you navigate away from it.

Tip

That’s why you store the new task in the TaskService service. The service is a singleton, meaning it’s a single instance shared across the application. Except if you force reload the browser page, it’ll keep the tasks you added in memory.

✔️ What you learned

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