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: `
    <some-element *axLazyElement="elementUrl"></some-element>
  `
})
export class FeatureComponent {
  elementUrl = 'https://your-org.com/elements/some-element.js';
}

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"": "^8.0.0" with "@angular-extensions/elements": "^8.0.0" ).

• 7.x

• 8.x

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 💡 🤔