Nationwide Polamorous Matrimony

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

    14.1.0 • 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

    💻 🎨 💡 📖 🤔 🚇 ⚠️

    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

    💻

    Sponsors

    Are you currently working in an enterprise environment with many applications and found yourself thinking you could provide so much more value only if you had better overview to plan, track progress and just get things done?

    Try Omniboard, the best tool for lead software engineers and architects that helps them to get an overview to drive change by querying and tracking all their code bases!

    The free plan let's you get a full overview of all your projects with your first dashboard, tracking up to 3 different things!

    Omniboard.dev - getting started in less than 5 minutes

    Install

    npm i @angular-extensions/elements

    DownloadsWeekly Downloads

    8,117

    Version

    14.1.0

    License

    MIT

    Unpacked Size

    258 kB

    Total Files

    36

    Last publish

    Collaborators

    • tomastrajan
    • timdeschryver
    • kreuzerk
    • macjohnny