Virtual DOM extension for Angular, heavily inspired by Inferno.
Install from NPM or Yarn:
npm install ng-vdom --save
Add to NgModule imports:
import { VDomModule } from 'ng-vdom';
@NgModule({
imports: [
VDomModule
]
})
export class SomeModule {}
Edit tsconfig JSX options:
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "createElement"
}
}
Make an Angular Component extends Renderable
with a render
method:
import { Component } from '@angular/core'
import { createElement, Renderable } from 'ng-vdom'
@Component({
template: ``
})
export class AppComponent extends Renderable {
render() {
return (
<h1>Hello World!</h1>
)
}
}
Embedding Virtual DOM contents inside template
import { Component, NgModule } from '@angular/core'
import { VDomModule } from 'ng-vdom'
@Component({
template: `
<v-outlet [def]="element"></v-outlet>
`
})
export class AppComponent {
element = <h1>Hello World</h1>
}
@NgModule({
imports: [ VDomModule ],
})
export class AppModule { }
entryComponents
);