Angular Extensions - Elements

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

double_arrow 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

style Use cases

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

playlist_add_check 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