<p align="center"> <img src="https://raw.github.com/angular-extensions/elements/master/projects/elements-demo/src/assets/logo/logo.svg?sanitize=true" width="120" height="120"> </p>

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 { LazyElementDirective } from '@angular-extensions/elements';
3. Append LazyElementDirective to the imports: [] of your MyOrgComponent
4. Add new schemas: [] property with CUSTOM_ELEMENTS_SCHEMA value to @Component decorator of your MyOrgComponent
5. Use *axLazyElement directive on an element you wish to load and pass in the url of the element bundle

Example of component implementation

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LazyElementDirective } from '@angular-extensions/elements';

@Component({
  selector: 'your-org-feature',
  imports: [LazyElementDirective],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <!-- will be lazy loaded and uses standard Angular template bindings -->
    <some-element
      *axLazyElement="elementUrl"
      [data]="data"
      (dataChange)="handleChange($event)"
    ></some-element>
  `,
})
export class MyOrgComponent {
  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! 🤗

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="16.66%"><a href="https://medium.com/@tomastrajan"><img src="https://avatars0.githubusercontent.com/u/3764868?v=4?s=85" width="85px;" alt="Tomas Trajan"/><br />_{<b>Tomas Trajan</b>}</a><br /><a href="https://github.com/angular-extensions/elements/commits?author=tomastrajan" title="Code">💻</a> <a href="#design-tomastrajan" title="Design">🎨</a> <a href="#example-tomastrajan" title="Examples">💡</a> <a href="https://github.com/angular-extensions/elements/commits?author=tomastrajan" title="Documentation">📖</a> <a href="#ideas-tomastrajan" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-tomastrajan" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/angular-extensions/elements/commits?author=tomastrajan" title="Tests">⚠️</a></td> <td align="center" valign="top" width="16.66%"><a href="https://medium.com/@overthesanity"><img src="https://avatars.githubusercontent.com/u/7337691?v=4?s=85" width="85px;" alt="Artur Androsovych"/><br />_{<b>Artur Androsovych</b>}</a><br /><a href="https://github.com/angular-extensions/elements/commits?author=arturovt" title="Code">💻</a> <a href="https://github.com/angular-extensions/elements/issues?q=author%3Aarturovt" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="16.66%"><a href="http://www.lambda-it.ch"><img src="https://avatars2.githubusercontent.com/u/2899448?v=4?s=85" width="85px;" alt="Wayne Maurer"/><br />_{<b>Wayne Maurer</b>}</a><br /><a href="https://github.com/angular-extensions/elements/issues?q=author%3Awmaurer" title="Bug reports">🐛</a> <a href="https://github.com/angular-extensions/elements/commits?author=wmaurer" title="Code">💻</a></td> <td align="center" valign="top" width="16.66%"><a href="https://www.santoshyadav.dev"><img src="https://avatars3.githubusercontent.com/u/11923975?v=4?s=85" width="85px;" alt="Santosh Yadav"/><br />_{<b>Santosh Yadav</b>}</a><br /><a href="https://github.com/angular-extensions/elements/commits?author=santoshyadav198613" title="Code">💻</a> <a href="#platform-santoshyadav198613" title="Packaging/porting to new platform">📦</a></td> <td align="center" valign="top" width="16.66%"><a href="https://twitter.com/daviddalbusco"><img src="https://avatars0.githubusercontent.com/u/16886711?v=4?s=85" width="85px;" alt="David Dal Busco"/><br />_{<b>David Dal Busco</b>}</a><br /><a href="https://github.com/angular-extensions/elements/commits?author=peterpeterparker" title="Code">💻</a> <a href="#example-peterpeterparker" title="Examples">💡</a></td> <td align="center" valign="top" width="16.66%"><a href="https://www.linkedin.com/in/mohammedzamakhan"><img src="https://avatars3.githubusercontent.com/u/2327532?v=4?s=85" width="85px;" alt="Zama Khan Mohammed"/><br />_{<b>Zama Khan Mohammed</b>}</a><br /><a href="https://github.com/angular-extensions/elements/commits?author=mohammedzamakhan" title="Code">💻</a> <a href="#ideas-mohammedzamakhan" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/angular-extensions/elements/commits?author=mohammedzamakhan" title="Tests">⚠️</a></td> </tr> <tr> <td align="center" valign="top" width="16.66%"><a href="https://github.com/angelfraga"><img src="https://avatars0.githubusercontent.com/u/11693938?v=4?s=85" width="85px;" alt="Angel Fraga Parodi"/><br />_{<b>Angel Fraga Parodi</b>}</a><br /><a href="#example-angelfraga" title="Examples">💡</a> <a href="#ideas-angelfraga" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="16.66%"><a href="https://github.com/ye3i"><img src="https://avatars1.githubusercontent.com/u/5447242?v=4?s=85" width="85px;" alt="ye3i"/><br />_<b>ye3i</b></a><br /><a href="https://github.com/angular-extensions/elements/commits?author=ye3i" title="Code">💻</a> <a href="#ideas-ye3i" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="16.66%"><a href="https://github.com/MagicCurlyHair"><img src="https://avatars3.githubusercontent.com/u/38192464?v=4?s=85" width="85px;" alt="Heorhi Shakanau"/><br />_{<b>Heorhi Shakanau</b>}</a><br /><a href="https://github.com/angular-extensions/elements/commits?author=MagicCurlyHair" title="Code">💻</a> <a href="#ideas-MagicCurlyHair" title="Ideas, Planning, & Feedback">🤔</a></td> <td align="center" valign="top" width="16.66%"><a href="http://www.plets.me/"><img src="https://avatars3.githubusercontent.com/u/119980?v=4?s=85" width="85px;" alt="Felipe Plets"/><br />_{<b>Felipe Plets</b>}</a><br /><a href="https://github.com/angular-extensions/elements/commits?author=felipeplets" title="Code">💻</a> <a href="#design-felipeplets" title="Design">🎨</a> <a href="#example-felipeplets" title="Examples">💡</a> <a href="https://github.com/angular-extensions/elements/commits?author=felipeplets" title="Documentation">📖</a> <a href="#ideas-felipeplets" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/angular-extensions/elements/commits?author=felipeplets" title="Tests">⚠️</a></td> <td align="center" valign="top" width="16.66%"><a href="https://github.com/jkubiszewski"><img src="https://avatars.githubusercontent.com/u/5447242?v=4?s=85" width="85px;" alt="jkubiszewski"/><br />_{<b>jkubiszewski</b>}</a><br /><a href="https://github.com/angular-extensions/elements/commits?author=jkubiszewski" title="Code">💻</a></td> <td align="center" valign="top" width="16.66%"><a href="https://github.com/gshokanov"><img src="https://avatars.githubusercontent.com/u/38192464?v=4?s=85" width="85px;" alt="Heorhi Shakanau"/><br />_{<b>Heorhi Shakanau</b>}</a><br /><a href="https://github.com/angular-extensions/