Панель уведомлений Angular:

В Angular вы можете создать панель уведомлений или всплывающие уведомления для отображения важных сообщений или предупреждений пользователю. Есть несколько способов добиться этого, и ниже я приведу несколько примеров:

1. Использование Angular Material Snackbar:
   Angular Material предоставляет компонент Snackbar, который можно использовать для отображения уведомлений. Сначала установите Angular Material, выполнив следующую команду:

   ng add @angular/material

   Затем в вашем компоненте импортируйте классы MatSnackBarи MatSnackBarConfig:

   import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';

   Затем внедрите MatSnackBarв конструктор вашего компонента:

   constructor(private snackBar: MatSnackBar) { }

   Наконец, вы можете использовать метод open()MatSnackBarдля отображения уведомления:

   showNotification(message: string) {
   const config: MatSnackBarConfig = {
   duration: 3000, // Duration in milliseconds
   verticalPosition: 'top' // Position of the notification
   };
   this.snackBar.open(message, '', config);
   }

2. Использование ngx-toastr:
   ngx-toastr — популярная библиотека уведомлений для Angular. Сначала установите его, выполнив следующую команду:

   npm install ngx-toastr

   Импортируйте необходимые модули и стили в файл app.module.ts:

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   import { ToastrModule } from 'ngx-toastr';
   @NgModule({
   imports: [
   BrowserAnimationsModule,
   ToastrModule.forRoot()
   ],
   // ...
   })

   В свой компонент импортируйте ToastrService:

   import { ToastrService } from 'ngx-toastr';

   Внедрите ToastrServiceв конструктор вашего компонента:

   constructor(private toastr: ToastrService) { }

   Затем вы можете использовать методы success(), error()или info()ToastrServiceдля отображения уведомлений:

   showNotification(message: string) {
   this.toastr.success(message, 'Notification');
   }

3. Использование настраиваемого компонента.
   Вы также можете создать свой собственный настраиваемый компонент уведомлений. Вот пример:

notification.comComponent.ts:

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-notification',
  template: `
    <div class="notification">
      <span>{{ message }}</span>
    </div>
  `,
  styles: [`
    .notification {
      background-color: #f1f1f1;
      padding: 10px;
      border: 1px solid #ccc;
    }
  `]
})
export class NotificationComponent {
  @Input() message: string;
}

Чтобы использовать этот компонент в своем приложении, добавьте его в свой шаблон:

<app-notification [message]="notificationMessage"></app-notification>

В вашем компоненте установите для свойства notificationMessageнужное сообщение.