Git Product home page Git Product logo

elements's Introduction

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

๐Ÿ’ป ๐Ÿค”

elements's People

Contributors

angelfraga avatar dependabot[bot] avatar gshokanov avatar jkubiszewski avatar mohammedzamakhan avatar nagornovalex avatar nerrdii avatar peterpeterparker avatar santoshyadavdev avatar tomastrajan avatar wmaurer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.