ngx-elements
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    npm version License: MIT

    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)

    Install

    npm i ngx-elements

    DownloadsWeekly Downloads

    0

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    40 kB

    Total Files

    5

    Last publish

    Collaborators

    • aelbore