A clean React-like abstraction for rendering non-Angular components within an Angular app.
npm install ngcomponent[build]: https://img.shields.io/circleci/project/coatue-oss/ngcomponent.svg?branch=master&style=flat-square
[npm]: https://img.shields.io/npm/v/ngcomponent.svg?style=flat-square
[mit]: https://img.shields.io/npm/l/ngcomponent.svg?style=flat-square
> A clean React-like abstraction for rendering non-Angular components within an Angular app.
``shUsing Yarn:
yarn add ngcomponent angular angular-resource
Usage
Note: This example is in TypeScript, but it works just as well in vanilla JavaScript
`ts
import NgComponent from 'ngcomponent'interface Props {
foo: number
bar: string[]
}
interface State {}
const myComponent = {
bindings: {
foo: '<',
bar: '<'
},
template:
,
controller: class extends NgComponent {
...
}
}
`Full Example
`ts
import NgComponent from 'ngcomponent'interface Props {
data: number[]
type: "bar"|"line"
}
interface State {
chart: Chart
}
const chartJSWrapper = {
bindings: {
data: '<',
type: '<'
},
template:
,
constructor(private $element: JQuery){}
controller: class extends NgComponent { 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
`sh
npm test
`Hacking On It
`sh
Just watch TypeScript:
npm run watchOr, watch TypeScript and run tests on change:
npm run tdd
``Apache 2.0