Component outputs

Component output

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

in the TaskList component, we want to call a function to delete all tasks
in the TaskForm component, we want to update the form with basic information

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

Define the output

Instructions

Update the AlertBanner class:

import { output } from '@angular/core';

onSubmit = output<void>();

Update the template of alert-banner.html file:

<button class="btn"
  [class.btn-info]="type() ? type() === 'info' : false"
  [class.btn-error]="type() ? type() === 'error' : false"
  (click)="onSubmit.emit()">Proceed</button>

Update the TaskList class:

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

Update the template of task-list.html file:

<app-alert-banner message="Do you really want to delete all tasks?" type="error" (onSubmit)="deleteAllTasks()"/>

Update the TaskForm class:

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

Update the template of task-form.html file:

<app-alert-banner message="Do you want to prefill Form?" type="info" (onSubmit)="preFillForm()" />

Test the application.