ngx-elements

Wrap and register your Angular Ivy Component as custom element

Getting Started

• Install dependencies

  git clone https://github.com/aelbore/ngx-elements.git
  cd ngx-elements
  npm install

Installation

  npm install ngx-elements

Example

• npm run ngcc - compile all @angular/* libraries into ivy compatible
• npm run build - build ngx-elements
• npm run build:profile - build the example code
• npm run serve - run into browser http://localhost:5000

API

• renderCustomElement - wrap and register your component into custom element (web components)
• renderNgComponent - wrap your component to automatically have change detection

Features

• Constructable Stylesheets
• AutoChangeDetectChanges
• Register Multiple Components, Directives, and Pipes

  renderCustomElement(HelloWorldComponent, {
   directives: [ NgForOf, MyTabItemComponent, MyTabComponent ],
   pipes: [ AsyncPipe ]
  }) 

Usage

• Create hello-world.ts
  • When you change the value of <input> it will trigger the change detection (detectChanges) to update the <h1> element
  • by default it will trigger the change dectection when any of the properties changed

    import { Component, ViewEncapsulation, Input } from "@angular/core";
    import { renderCustomElement } from 'ngx-elements'
    
    @Component({
      selector: "hello-world",
      template: `
        <h1>Hello {{ name }}</h1>
        <input 
          [value]="name" 
          (input)="updateName($event.target.value)" 
         />
      `,
      styles: [`
        h1 { 
         color: var(--h1-color, blue) 
        }
      `],
      encapsulation: ViewEncapsulation.ShadowDom
    })
    export class HelloWorldComponent {
          
      @Input() name: string = "World"
    
      updateName(newName: string) {
        this.name = newName
      }
    
    }
    
    renderCustomElement(HelloWorldComponent)