Introduction

Branch

Introduction

In the Create first component chapter, we temporary displayed the task list by using its selector directly in the Appcomponent:

<app-task-list></app-task-list>

By doing so we were able to display the HTML template of the task list where the selector was used. We could even display as many list as we wanted by keep using the selector there:

<app-task-list></app-task-list>
<app-task-list></app-task-list>

That’s pretty useless here but it highlights the fact that we can use the same component multiple times, either in the same template or in different templates.

In the next lessons, you’ll learn how to create an AlertBanner component we’ll use both in the TaskList component and in the TaskForm one.

We’ll explore not only how to use it there but how to make it adaptable to different use cases.

Not all components need to be reusable, a lot of them are only meant to be used once in an application. We already saw how to reuse one by using TaskForm for two routes, changing its behavior based on the id existence in the URL.

In the next lessons, we’ll explore more common ways to adapt their behavior based on the context they are used in.