Basic usage

Branch

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

1. Update the template of alert-banner.component.ts 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

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

   <app-alert-banner />

2. Import the AlertBannerComponent in the task-list.component.ts file:

   import { AlertBannerComponent } from "../alert-banner/alert-banner.component";

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

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

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

   <app-alert-banner />

4. Import the AlertBannerComponent in the task-form.component.ts file:

   import { AlertBannerComponent } from "../alert-banner/alert-banner.component";

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

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

5. Test the application.

   You should see the banner displayed in both components.