Работа с Angular

Для использования Toastify в Angular проекте необходимо сначала установить библиотеку через npm:

npm install toastify-js

После установки подключение библиотеки может быть выполнено двумя способами:

  1. Импорт через Angular CLI: В angular.json в раздел scripts добавляется путь к библиотеке:
"scripts": [
  "node_modules/toastify-js/src/toastify.js"
]
  1. Импорт в компонент: Используется стандартный ES6 импорт в TypeScript:
import Toastify from 'toastify-js';
import 'toastify-js/src/toastify.css';

Использование второго способа позволяет более гибко управлять библиотекой и интегрировать её в компоненты.

Основные методы и параметры

Toastify создаёт уведомления, которые могут быть конфигурированы через объект параметров. Основные ключи:

  • text — текст уведомления.
  • duration — время отображения в миллисекундах (по умолчанию 3000).
  • close — отображение кнопки закрытия (true/false).
  • gravity — позиция по вертикали: "top" или "bottom".
  • position — позиция по горизонтали: "left", "center", "right".
  • backgroundColor — цвет фона.
  • className — CSS-класс для кастомной стилизации.
  • onClick — функция, выполняемая при клике на уведомление.
  • offset — смещение по горизонтали и вертикали.

Пример базового вызова:

Toastify({
  text: "Операция выполнена успешно",
  duration: 3000,
  gravity: "top",
  position: "right",
  backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)"
}).showToast();

Интеграция в Angular компонент

Создание сервиса для управления уведомлениями упрощает повторное использование:

import { Injectable } from '@angular/core';
import Toastify from 'toastify-js';

@Injectable({
  providedIn: 'root'
})
export class ToastService {
  
  show(message: string, options?: any) {
    Toastify({
      text: message,
      duration: options?.duration || 3000,
      gravity: options?.gravity || "top",
      position: options?.position || "right",
      backgroundColor: options?.backgroundColor || "linear-gradient(to right, #00b09b, #96c93d)",
      close: options?.close || false,
      onClick: options?.onClick
    }).showToast();
  }
}

В компоненте сервис подключается через DI и используется для вызова уведомлений:

import { Component } from '@angular/core';
import { ToastService } from './toast.service';

@Component({
  selector: 'app-example',
  template: `<button (click)="notify()">Показать уведомление</button>`
})
export class ExampleComponent {

  constructor(private toastService: ToastService) {}

  notify() {
    this.toastService.show("Данные успешно сохранены");
  }
}

Кастомизация и стилизация

Toastify поддерживает полное управление стилями:

  • Использование className позволяет добавлять собственные CSS-классы:
Toastify({
  text: "Ошибка при загрузке данных",
  className: "error-toast",
  duration: 5000
}).showToast();
  • CSS для кастомного класса:
.error-toast {
  background-color: #ff4c4c;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  padding: 10px 20px;
}
  • Позиционирование с помощью gravity и position позволяет создавать уведомления в углах экрана или по центру.

Обработка событий

Toastify позволяет реагировать на действия пользователя:

  • onClick — обработка клика на уведомление:
Toastify({
  text: "Нажмите для перехода",
  onClick: () => window.location.href = "/profile"
}).showToast();
  • close — кнопка закрытия уведомления. При использовании параметра close: true пользователь может самостоятельно скрыть уведомление до окончания таймера.

Адаптация под Angular Material

При использовании Angular Material можно объединять Toastify с другими компонентами:

  • Срабатывание уведомления после действий пользователя, например, после подтверждения через MatDialog.
  • Использование сервисного подхода для единой точки управления всеми toast-сообщениями.

Пример:

import { MatDialog } from '@angular/material/dialog';
import { ToastService } from './toast.service';

constructor(private dialog: MatDialog, private toastService: ToastService) {}

openDialog() {
  const dialogRef = this.dialog.open(SomeDialogComponent);

  dialogRef.afterClosed().subscribe(result => {
    if (result === 'success') {
      this.toastService.show("Операция выполнена успешно");
    }
  });
}

Продвинутые техники

  • Массив уведомлений: Создание очереди сообщений с последовательным показом.
  • Динамическое позиционирование: Изменение offset в зависимости от количества уведомлений на экране.
  • Интерактивные уведомления: Добавление кнопок и ссылок в текст уведомления через HTML:
Toastify({
  text: 'Доступно <a href="/update">обновление</a>',
  duration: 5000,
  escapeMarkup: false
}).showToast();
  • Глобальный стиль: Подключение глобальной CSS-стилизации в styles.scss для единообразного внешнего вида всех уведомлений.

Рекомендации по использованию в Angular

  • Использовать сервис для централизованного управления уведомлениями.
  • Настраивать duration и позицию уведомлений в зависимости от контекста.
  • Избегать частого показа уведомлений, чтобы не перегружать интерфейс.
  • Комбинировать Toastify с Angular анимациями для плавного появления и скрытия уведомлений.
Оглавление