Nostradamus Prophecy Machine
    Have ideas to improve npm?Join in the discussion! »

    @angular-extensions/elements
    TypeScript icon, indicating that this package has built-in type declarations

    11.0.1 • Public • Published

    ANGULAR EXTENSIONS ELEMENTS

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

    by @tomastrajan

    npm npm npm Build Status codecov Conventional Commits Twitter Follow

    Documentation

    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/elements@^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

    💻 🎨 💡 📖 🤔 ⚠️

    Install

    npm i @angular-extensions/elements

    DownloadsWeekly Downloads

    7,653

    Version

    11.0.1

    License

    MIT

    Unpacked Size

    347 kB

    Total Files

    41

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar