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

Featherlight — это лёгкая библиотека для создания модальных окон на JavaScript и jQuery. В контексте Angular её использование требует правильного подключения и интеграции с компонентной структурой фреймворка.

Для начала необходимо установить jQuery, так как Featherlight зависит от него:

npm install jquery
npm install featherlight

После установки нужно импортировать jQuery и Featherlight в проект. В Angular это делается через angular.json или через импорт в конкретном компоненте:

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/featherlight/release/featherlight.min.js"
],
"styles": [
  "node_modules/featherlight/release/featherlight.min.css"
]

Альтернативно, можно импортировать их в компонент с использованием TypeScript:

import * as $ from 'jquery';
import 'featherlight';
import 'featherlight/release/featherlight.min.css';

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

Featherlight предоставляет функцию $.featherlight, которая открывает модальное окно. В Angular можно использовать её внутри методов компонента, например:

export class ExampleComponent {
  openModal() {
    $.featherlight('<p>Содержимое модального окна</p>');
  }
}

Такой подход позволяет открывать модальные окна по клику на кнопки, обработчикам событий или другим действиям:

<button (click)="openModal()">Открыть модальное окно</button>

Использование HTML-шаблонов в модальных окнах

Featherlight поддерживает контент из DOM-элементов. В Angular удобно использовать скрытые блоки с ng-template:

<ng-template #modalContent>
  <div class="modal-body">
    <h2>Заголовок окна</h2>
    <p>Текст с описанием</p>
  </div>
</ng-template>

<button (click)="openTemplateModal(modalContent)">Открыть окно</button>

В компоненте подключение шаблона выполняется через ViewChild и передачу контента в Featherlight:

import { Component, TemplateRef, ViewChild } from '@angular/core';

export class ExampleComponent {
  @ViewChild('modalContent', { static: true }) modalTemplate!: TemplateRef<any>;

  openTemplateModal(template: TemplateRef<any>) {
    const html = (template.elementRef.nativeElement as HTMLElement).innerHTML;
    $.featherlight(html);
  }
}

Настройка параметров Featherlight

Библиотека поддерживает множество опций:

  • variant — класс для кастомного оформления;
  • closeIcon — возможность задать собственный значок закрытия;
  • persist — если true, модальное окно сохраняется между открытиями;
  • afterOpen, beforeClose, afterClose — колбэки для жизненного цикла окна.

Пример с настройкой и колбэками:

$.featherlight('<p>Контент окна</p>', {
  variant: 'custom-featherlight',
  closeIcon: '×',
  persist: false,
  afterOpen: function() {
    console.log('Окно открыто');
  },
  beforeClose: function() {
    console.log('Окно скоро закроется');
  }
});

Работа с динамическим контентом и Angular сервисами

Featherlight может использовать данные, полученные через Angular сервисы. Пример загрузки данных через HTTP и отображения в модальном окне:

import { HttpClient } from '@angular/common/http';

export class ExampleComponent {
  constructor(private http: HttpClient) {}

  openDataModal() {
    this.http.get('/api/data', { responseType: 'text' }).subscribe(data => {
      $.featherlight(`<div>${data}</div>`);
    });
  }
}

Стилизация и интеграция с Angular

Featherlight предоставляет базовые стили, которые можно расширять через CSS или SCSS в Angular. Рекомендуется использовать кастомные классы через опцию variant для соответствия стилю приложения:

.custom-featherlight {
  background-color: #f7f7f7;
  border-radius: 10px;
  padding: 20px;
  max-width: 500px;
}

Управление модальными окнами

Featherlight позволяет программно закрывать окна:

$.featherlight.current().close();

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

$.featherlight.close();

Взаимодействие с Angular формами и событиями

Featherlight не конфликтует с формами Angular, но при использовании двухсторонней привязки [(ngModel)] необходимо учитывать, что модальное окно создаёт копию контента в DOM. Для корректной работы форм лучше передавать данные через сервисы или шаблонные переменные, а не полагаться на прямую привязку к элементам внутри Featherlight.

Совмещение с Angular Router

Для сложных приложений с маршрутизацией Featherlight может открывать компоненты на основе маршрута. В этом случае модальное окно можно открыть после навигации и передать параметры через сервис:

this.router.navigate(['/some-route']).then(() => {
  $.featherlight('<app-dynamic-component></app-dynamic-component>');
});

Такой подход позволяет интегрировать Featherlight в динамическую структуру приложения без прямого вмешательства в жизненный цикл Angular компонентов.

Оглавление