Basic usage

Create the alert UI

The DaisyUI library provides a nice looking UI for a alert component that can be used to display a message to the user.

Instructions

Update the template of alert-banner.html file:

<div role="alert" class="alert alert-vertical alert-info alert-soft">
<span>12 unread messages. Tap to see.</span>
<div>
    <button class="btn btn-sm">Deny</button>
    <button class="btn btn-sm btn-primary">Accept</button>
</div>
</div>

Display the component

Let’s now display the banner in the TaskList and TaskForm components.

Instructions

Update the template of task-list.html file:
```
<app-alert-banner />
```

Import the AlertBanner in the task-list.ts file:

import {AlertBanner} from '../shared/components/alert-banner/alert-banner'

And add it to the @Component decorator’s imports array:

@Component({
    selector: "app-task-list",
    templateUrl: "./task-list.html",
    styleUrl: "./task-list.css",
    imports: [
        // other imports
        AlertBanner
    ],
})

Update the template of task-form.html file:
```
<app-alert-banner />
```

Import the AlertBanner in the task-form.ts file:

import {AlertBanner} from "../shared/components/alert-banner/alert-banner";

And add it to the @Component decorator’s imports array:

@Component({
    selector: "app-task-form",
    templateUrl: "./task-form.html",
    styleUrl: "./task-form.css",
    imports: [
      // other imports
      AlertBanner
    ],
})

Test the application.

You should see the banner displayed in both components.