https://github.com/aelbore/ngx-elements

Wrap and register your Angular Ivy Component as custom element
https://github.com/aelbore/ngx-elements

angular customelements elements ivy rollup webcomponents

Last synced: 11 months ago
JSON representation

Wrap and register your Angular Ivy Component as custom element

• Host: GitHub
• URL: https://github.com/aelbore/ngx-elements
• Owner: aelbore
• Created: 2019-07-17T01:18:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T09:02:17.000Z (about 3 years ago)
• Last Synced: 2024-04-24T18:23:53.287Z (almost 2 years ago)
• Topics: angular, customelements, elements, ivy, rollup, webcomponents
• Language: TypeScript
• Size: 767 KB
• Stars: 22
• Watchers: 1
• Forks: 2
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/ngx-elements.svg)](https://www.npmjs.com/package/ngx-elements)

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/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](https://developers.google.com/web/updates/2019/02/constructable-stylesheets)

* AutoChangeDetectChanges

* Register Multiple Components, Directives, and Pipes

  ```typescript

  renderCustomElement(HelloWorldComponent, {

   directives: [ NgForOf, MyTabItemComponent, MyTabComponent ],

   pipes: [ AsyncPipe ]

  }) 

  ```

Usage

-----

* Create `hello-world.ts`

  - When you change the value of `` it will trigger the change detection (`detectChanges`) to update the `
` element

  - by default it will trigger the change dectection when any of the properties changed

    ```typescript

    import { Component, ViewEncapsulation, Input } from "@angular/core";

    import { renderCustomElement } from 'ngx-elements'


    @Component({

      selector: "hello-world",

      template: `

        
Hello {{ name }}

        

      `,

      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)

    ```