ANGULAR EXTENSIONS ELEMENTS

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

Documentation

Quickstart

Install npm i @angular-extensions/elements
Add import { LazyElementsModule } from '@angular-extensions/elements';
Append LazyElementsModule to the imports: [] of your AppModule
Add new schemas: [] property with CUSTOM_ELEMENTS_SCHEMA value to @NgModule decorator of your AppModule
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"": "^15.0.0" with "@angular-extensions/elements": "^15.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/elements@^6.0.0)

Internal dep graph

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} 💻 🎨 💡 📖 🤔 🚇 ⚠️	_{Artur Androsovych} 💻 🐛	_{Wayne Maurer} 🐛 💻	_{Santosh Yadav} 💻 📦	_{David Dal Busco} 💻 💡	_{Zama Khan Mohammed} 💻 🤔 ⚠️
_{Angel Fraga Parodi} 💡 🤔	_ye3i 💻 🤔	_{Heorhi Shakanau} 💻 🤔	_{Felipe Plets} 💻 🎨 💡 📖 🤔 ⚠️	_jkubiszewski 💻	_{Heorhi Shakanau} 💻
_NagornovAlex 💻	_{Joseph Davis} 💻	_{Arooba Shahoor} 💻	_{Maximilian Wright} 📖	_{Jakub Stawiarski} 💻	_{Paweł Kubiak} 💻
_{Egor Volvachev} 💻	_{Daniel Bou} 💻