NgComponent
A clean React-like abstraction for rendering non-Angular components within an Angular app.
Installation
yarn add ngcomponent angular angular-resource
npm install ngcomponent angular angular-resource --save
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 to this.props
)componentWillMount()
componentDidMount()
componentWillReceiveProps(props)
shouldComponentUpdate(props, state)
componentWillUpdate(props, state)
componentDidUpdate(props, state)
componentWillUnmount()
Running the Tests
npm test
Hacking On It
npm run watch
npm run tdd
License
Apache 2.0