Angular Elements

Angular Elements предоставляет возможность использовать компоненты Angular как стандартные Web Components, совместимые с любыми веб-приложениями, независимо от используемого фреймворка.

Основные концепции

  • Создание Angular Element Любой Angular-компонент может быть превращен в кастомный элемент с помощью функции createCustomElement.

    import { createCustomElement } from '@angular/elements';
import { Injector } from '@angular/core';
import { MyComponent } from './my.component';

const el = createCustomElement(MyComponent, { injector: this.injector });
customElements.define('my-element', el);

  • Инжектор зависимостей Для корректной работы Angular Element требуется передать инжектор, чтобы компонент имел доступ к сервисам и другим зависимостям Angular.

  • Регистрация элемента в DOM После регистрации через customElements.define элемент можно использовать в HTML как обычный тег:

    <my-element></my-element>

Преимущества Angular Elements

  • Интеграция компонентов Angular в проекты на React, Vue, или Vanilla JS.
  • Повторное использование кода без полной зависимости от Angular-приложения.
  • Лёгкость распространения компонентов через npm-пакеты или CDN.

Особенности работы

  • Angular Elements могут иметь @Input() и @Output(), позволяя передавать данные и обрабатывать события через стандартные DOM-события.
  • Для оптимизации размера сборки рекомендуется использовать Angular CLI с опцией --single-bundle, так как каждый элемент содержит необходимые runtime-библиотеки Angular.
  • Можно комбинировать несколько Angular Elements, создавая модульные виджеты для сторонних веб-приложений.

Angular Elements превращает Angular-компоненты в полностью изолированные и переносимые элементы, сохраняя все преимущества реактивного программирования и встроенных механизмов Angular.

Оглавление