Wrap and register your Angular Ivy Component as custom element
Wrap and register your Angular Ivy Component as custom element
git clone https://github.com/aelbore/ngx-elements.git
cd ngx-elements
npm install
npm install ngx-elements
npm run ngcc
- compile all @angular/*
libraries into ivy compatiblenpm run build
- build ngx-elements
npm run build:profile
- build the example codenpm run serve
- run into browser http://localhost:5000
renderCustomElement
- wrap and register your component into custom element (web components)renderNgComponent
- wrap your component to automatically have change detectionrenderCustomElement(HelloWorldComponent, {
directives: [ NgForOf, MyTabItemComponent, MyTabComponent ],
pipes: [ AsyncPipe ]
})
hello-world.ts
<input>
it will trigger the change detection (detectChanges
) to update the <h1>
elementimport { 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)