3.0.4 • Published 7 years ago
tlvine-ngcomponent v3.0.4
NgComponent
A clean React-like abstraction for rendering non-Angular components within an Angular app.
Installation
npm install --save ngcomponent
Usage
Note: This example is in TypeScript, but it works just as well in vanilla JavaScript
import {IComponentOptions} from 'angular'
import NgComponent from 'ngcomponent'
interface Props {
foo: number
bar: string[]
}
interface State {}
const myComponent: IComponentOptions = {
bindings: {
foo: '<',
bar: '<'
},
template: `
<div></div>
`,
controller: class extends NgComponent<Props, State> {
...
}
}
Full Example
interface Props {
data: number[]
type: "bar"|"line"
}
interface State {
chart: Chart
}
const chartJSWrapper: IComponentOptions = {
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
Hacking On It
# Just watch TypeScript:
npm run watch
# Or, watch TypeScript and run tests on change:
npm run tdd
License
Apache 2.0
3.0.4
7 years ago