Использование с Angular

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

npm install izitoast --save

После установки нужно подключить стили и скрипты. В Angular это делается через файл angular.json:

"styles": [
  "node_modules/izitoast/dist/css/iziToast.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/izitoast/dist/js/iziToast.min.js"
]

После этого iziToast будет доступен глобально в проекте.

Импорт и использование в компонентах

В Angular рекомендуется работать с iziToast через сервисы для обеспечения централизованного вызова уведомлений. Создаём сервис toast.service.ts:

import { Injectable } from '@angular/core';

declare var iziToast: any;

@Injectable({
  providedIn: 'root'
})
export class ToastService {

  success(title: string, message: string) {
    iziToast.success({
      title: title,
      message: message,
      position: 'topRight'
    });
  }

  error(title: string, message: string) {
    iziToast.error({
      title: title,
      message: message,
      position: 'topRight'
    });
  }

  info(title: string, message: string) {
    iziToast.info({
      title: title,
      message: message,
      position: 'topRight'
    });
  }

  warning(title: string, message: string) {
    iziToast.warning({
      title: title,
      message: message,
      position: 'topRight'
    });
  }
}

Использование сервиса в компоненте:

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

@Component({
  selector: 'app-notification-demo',
  templateUrl: './notification-demo.component.html'
})
export class NotificationDemoComponent {

  constructor(private toast: ToastService) {}

  showSuccess() {
    this.toast.success('Успех', 'Операция выполнена успешно');
  }

  showError() {
    this.toast.error('Ошибка', 'Произошла ошибка при выполнении операции');
  }
}

Настройка глобальных параметров

Для единообразного отображения уведомлений можно определить глобальные параметры в сервисе или отдельном файле конфигурации:

const iziToastOptions = {
  timeout: 5000,
  progressBar: true,
  position: 'topRight',
  close: true,
  animateInside: true
};

Далее их можно применять при каждом вызове:

iziToast.success({
  title: 'Успех',
  message: 'Данные успешно сохранены',
  ...iziToastOptions
});

Это позволяет централизованно управлять стилем и поведением всех уведомлений.

Работа с событиями и обратными вызовами

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

iziToast.info({
  title: 'Информация',
  message: 'Нажмите для действий',
  onOpening: () => console.log('Уведомление открыто'),
  onClosing: () => console.log('Уведомление закрыто'),
  onClick: () => console.log('Уведомление кликнуто')
});

Использование HTML и кастомного контента

iziToast позволяет вставлять HTML-разметку в сообщения для создания более сложного интерфейса уведомлений:

iziToast.show({
  title: 'Пользовательское уведомление',
  message: '<b>Важное сообщение</b><br>Подробная информация здесь',
  position: 'topRight',
  timeout: 7000,
  close: true,
  overlay: true
});

Такой подход полезен для уведомлений с кнопками действий или форматированным текстом.

Интеграция с RxJS и сервисами Angular

Часто уведомления должны отображаться при событиях в сервисах, таких как HTTP-запросы или обработка ошибок. Использование RxJS операторов позволяет централизованно вызывать iziToast:

this.http.get('/api/data')
  .subscribe({
    next: () => this.toast.success('Успех', 'Данные загружены'),
    error: () => this.toast.error('Ошибка', 'Не удалось загрузить данные')
  });

Такой подход упрощает обработку глобальных уведомлений без дублирования кода в каждом компоненте.

Адаптация для мобильных устройств

iziToast поддерживает позиционирование и адаптивные настройки. Для мобильных можно изменить параметры:

iziToast.settings({
  timeout: 4000,
  position: window.innerWidth < 768 ? 'bottomCenter' : 'topRight'
});

Это позволяет улучшить UX на устройствах с маленьким экраном, избегая перекрытия важного контента.

Обработка нескольких уведомлений

iziToast позволяет отображать несколько уведомлений одновременно без их наложения:

iziToast.success({
  title: 'Задача выполнена',
  message: 'Операция 1 завершена'
});

iziToast.success({
  title: 'Задача выполнена',
  message: 'Операция 2 завершена'
});

Для управления порядком или уникальными идентификаторами можно использовать параметр id:

iziToast.show({
  id: 'unique-toast',
  title: 'Уведомление',
  message: 'Только одно уведомление с этим id'
});

Локализация сообщений

Для проектов с поддержкой нескольких языков можно комбинировать iziToast с Angular i18n или ngx-translate:

this.translate.get('SUCCESS_MESSAGE').subscribe(message => {
  this.toast.success('Успех', message);
});

Это обеспечивает единый способ локализовать все уведомления в приложении.

Оглавление