Component output

Branch

Component output

One key feature of reusable components is not to define what happen on an action but to notify the parent component that an action has been performed. In the AlertBanner component, we want to add a button, trigerring a different action based on its usage:

• in the TaskList component, we want to delete all tasks
• in the TaskForm component, we want to pre fill the form with basic information

To do so, we’ll use the output feature of Angular.

Define the output

Instructions

1. Update the AlertBannerComponent class:

   import { output } from '@angular/core';
   
   onSubmit = output<void>();

2. Update the template of alert-banner.component.ts file:

   <button (click)="onSubmit.emit()">Submit</button>

3. Update the TaskListComponent class:

   deleteAllTasks() {
       // TODO: delete all tasks
   }

4. Update the template of task-list.component.ts file:

   <app-alert-banner (onSubmit)="deleteAllTasks()" />

5. Update the TaskFormComponent class:

   preFillForm() {
       // TODO: pre fill the form with basic information
   }

6. Update the template of task-form.component.ts file:

   <app-alert-banner (onSubmit)="preFillForm()" />

7. Test the application.