TOMAS TRAJAN BLOG

Open source

Angular Extensions - Elements

4000+

80+

10+

5+

Repo Docs
The @angular-extensions/elements is the easiest way to lazy load Angular Elements or any other web components in your Angular application!

Get started

  1. Install npm i @angular-extensions/elements
  2. Add import { LazyElementsModule } from '@angular-extensions/elements';
  3. Append LazyElementsModule to the imports: [] of your AppModule
  4. Add new schemas: [] property with CUSTOM_ELEMENTS_SCHEMA value to @NgModule decorator of your AppModule
  5. Use *axLazyElement directive on an element you wish to load and pass in the url of the element bundle
How to use @angular-extensions/elements

Use cases

  • Microfrontends
  • Sub-applications
  • Heavy 3rd party components (like rich text editors,...)

Features

  1. Lightweight
  2. Simple API
  3. Loading (and error) indicator support
  4. Lazy by default
  5. Uses standard Angular template bindings for props and events
  6. Great performance (elements are guaranteed to load only once)
  7. Pre-configuration & pre-loading
© 2020Made with by @tomastrajan1.0.0