exercises

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

notification.component.ts (1367B)

      1 import { Component, inject } from '@angular/core';
      2 import { CommonModule } from '@angular/common';
      3 import { NotificationService } from './notification.service';
      4 
      5 @Component({
      6   selector: 'div.notifications',
      7   standalone: true,
      8   imports: [CommonModule],
      9   template: `
     10       @for (notification of notificationService.notifications$(); track notification.id) {
     11         <div 
     12           class="alert alert-{{ notification.type }} alert-dismissible fade show mb-2 notification-item" 
     13           role="alert">
     14           {{ notification.message }}
     15           <button 
     16             type="button" 
     17             class="btn-close" 
     18             (click)="notificationService.dismiss(notification.id)"
     19             aria-label="Close">
     20           </button>
     21         </div>
     22       }
     23   `,
     24   styles: [`
     25     .notification-container {
     26       pointer-events: none;
     27     }
     28     
     29     .alert {
     30       pointer-events: auto;
     31       box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
     32       border-left-width: 4px;
     33       font-size: 0.95rem;
     34     }
     35     
     36     .notification-item {
     37       animation: slideIn 0.3s ease-out;
     38     }
     39     
     40     @keyframes slideIn {
     41       from {
     42         opacity: 0;
     43         transform: translateX(100%);
     44       }
     45       to {
     46         opacity: 1;
     47         transform: translateX(0);
     48       }
     49     }
     50   `]
     51 })
     52 export class NotificationComponent {
     53   notificationService = inject(NotificationService);
     54 }