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

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

От автора: как разработчики, мы стремимся использовать существующие библиотеки, чтобы не изобретать снова велосипед. К сожалению, Angular по-прежнему относительно молод, и мы не можем найти компоненты Angular для всего, что нам нужно.

Цель этой статьи — продемонстрировать примеры использования, в которых Angular компоненты могут быть связаны с библиотеками vanilla.

Пример 1

В этом примере мы будем использовать библиотеку под названием Sweet Alert. SweetAlert создает красивые всплывающие сообщения.

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

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

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

Теперь мы можем использовать это и передать компонент Angular в качестве content. Чтобы это работало нам нужно создавать компонент динамически. Мы создаем простой компонент, который можно передать в Sweet Alert.

Следующее, что нам нужно сделать, это создать компонент.

После того, как мы создали компонент, мы получим ссылку на собственный элемент DOM, который передается в параметр Sweet Alert content. Кроме того, конечно, мы можем передать при необходимости Input().

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Пример 2

В этом примере мы будем использовать библиотеку под названием highcharts. Часто нам бывает необходимо настроить в разметке всплывающие подсказки для диаграмм. Такие библиотеки, как highcharts, дают нам возможность передать HTML-строку, которая будет отображаться внутри всплывающей подсказки. Давайте создадим компонент Angular и передадим его в библиотеку.

Мы создали простой компонент, который получает данные в качестве Input() и отображает их списком. Теперь давайте посмотрим, как мы можем это использовать.

Сначала мы создаем компонент один раз внутри хука ngOnInit. Внутри обратного вызова formatter мы имеем доступ к точкам диаграммы, которые передаются нашему компоненту в качестве Input(). Затем мы выполняем обнаружение изменений и возвращаем innerHTML, который будет отображаться внутри элемента подсказки.

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

Автор: Netanel Basal

Источник: https://netbasal.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий