Component inputs

Component inputs

The banner displays a messagebut not only it’s a placeholder unrelated ot the application but we want the message to be different based on where it’s used:

in the TaskList component, we want to display a message inviting to delete all existing tasks
in the TaskForm component, we want to display a message inviting to pre fill the form with basic information

We will define inputs to make the component more adaptable to different use cases. These inputs are a way to pass data to this component, from the template where it’s used.

We also call it a parent-child relationship: the parent is the component using the child in its own template.

We’ll firstly define thes properties in the AlertBannerComponent class, then pass the data through the TaskList and TaskForm templates.

Define the inputs

Define the message input

Instructions

Update the AlertBannerComponent class:

import { input } from "@angular/core";

message = input.required<string>();

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

<div role="alert" class="alert alert-vertical alert-info alert-soft">
    <span>{{ message() }}</span>
</div>

Update the template of task-list.component.ts file:
```
<app-alert-banner message="Hello World" />
```
Update the template of task-form.component.ts file:
```
<app-alert-banner message="Hello World" />
```
Test the application.

Define the type input

Instructions

Update the AlertBannerComponent class:

type = input.required<"info" | "error">();

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

Note
The available classes are alert-info and alert-error, not just info and error. So we need to use a template literal to build the class name.
```
<div role="alert" class=`alert alert-vertical alert-${type()} alert-soft`>
    <span>{{ message() }}</span>
</div>
```

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

<app-alert-banner message="Hello World" type="error" />

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

<app-alert-banner message="Hello World" type="info" />

Test the application.