ANGULAR EXTENSIONS ELEMENTS

The easiest way to lazy-load Angular Elements or any other web components in your Angular application!

by @tomastrajan

Documentation

• Docs
• Getting started
• Use cases
• FAQ
• API
• Examples
• Blog post
• Meetup presentation (video)

Quickstart

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

Example of module implementation...

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyElementsModule } from '@angular-extensions/elements';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [BrowserModule, LazyElementsModule],
  declarations: [AppComponent, FeatureComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example of component implementation

import { Component } from '@angular/core';

@Component({
  selector: 'your-org-feature',
  template: `
    <!-- will be lazy loaded and uses standard Angular template bindings -->
    <some-element
      *axLazyElement="elementUrl"
      [data]="data"
      (dataChange)="handleChange($event)"
    >
    </some-element>
  `,
})
export class FeatureComponent {
  elementUrl = 'https://your-org.com/elements/some-element.js';

  data: SomeData;

  handleChange(change: Partial<SomeData>) {
    // ...
  }
}

Supported Angular versions

Library was tested with the following versions of Angular and is meant to be used with the corresponding major version ("@angular/core"": "^9.0.0" with "@angular-extensions/elements": "^9.0.0" ).

• 9.x (full IVY support, using renderers so careful with SSR)
• 8.x (partial IVY support, axLazyElement works but axLazyElementDynamic does NOT work with IVY)
• 7.x
• 6.x (eg npm i @angular-extensions/[email protected]^6.0.0)

Become a contributor

Missing a feature, found bug or typo in docs?

Please, feel free to open an issue or submit a pull request to make this project better for everyone! 🤗

Tomas Trajan 💻 🎨 💡 📖 🤔 🚇 ⚠️	Wayne Maurer 🐛 💻	Santosh Yadav 💻 📦	David Dal Busco 💻 💡	Zama Khan Mohammed 💻 🤔 ⚠️	Angel Fraga Parodi 💡 🤔
ye3i 💻 🤔	Heorhi Shakanau 💻 🤔	Felipe Plets 💻 🎨 💡 📖 🤔 ⚠️