@ingeneric/ngcomponent
v6.0.4
Published
A clean React-like abstraction for rendering non-Angular components within an Angular app.
Downloads
4
Maintainers
Readme
NgComponent
An actualized version of the coatue-oss/ngcomponent package.
A clean React-like abstraction for rendering non-Angular components within an Angular app.
Installation
``
npm i @ingeneric/ngcomponent --save
Warning: This package is native ESM and no longer provides a CommonJS export. If your project uses CommonJS, you will have to convert to ESM or use the dynamic import()
function. Please don't open issues for questions regarding CommonJS / ESM.
Usage
Note: This example is in TypeScript, but it works just as well in vanilla JavaScript
import NgComponent from 'ngcomponent'
interface Props {
foo: number
bar: string[]
}
interface State {}
const myComponent = {
bindings: {
foo: '<',
bar: '<'
},
template: `
<div></div>
`,
controller: class extends NgComponent<Props, State> {
...
}
}
Full Example
import NgComponent from 'ngcomponent'
interface Props {
data: number[]
type: "bar"|"line"
}
interface State {
chart: Chart
}
const chartJSWrapper = {
bindings: {
data: '<',
type: '<'
},
template: `<canvas></canvas>`,
constructor(private $element: JQuery){}
controller: class extends NgComponent<Props, State> {
componentDidMount() {
this.state.chart = new Chart($element.find('canvas'), {
data: props.data,
type: props.type
})
}
render() {
this.state.chart.data = this.props.data
this.state.chart.type = this.props.type
this.state.chart.update()
}
componentWillUnmount() {
this.state.chart.destroy()
}
}
}
Lifecycle Hooks
NgComponent has a React-like component lifecycle API:
render()
(use this to react to changes tothis.props
)componentWillMount()
componentDidMount()
componentWillReceiveProps(props)
shouldComponentUpdate(props, state)
componentWillUpdate(props, state)
componentDidUpdate(props, state)
componentWillUnmount()
Running the Tests
npm test
License
Apache 2.0