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

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

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

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

Пример 1

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Пример 2

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

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

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

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

Автор: Netanel Basal

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

Подробнее

Метки:

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

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

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

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