NgComponent

A clean React-like abstraction for rendering non-Angular components within an Angular app.

Installation

# Using Yarn:
yarn add ngcomponent angular angular-resource
# Or, using NPM:
npm install ngcomponent angular angular-resource --save

Usage

Note: This example is in TypeScript, but it works just as well in vanilla JavaScript

importNgComponentfrom'ngcomponent'interfaceProps{foo: numberbar: string[]}interfaceState{}constmyComponent={bindings: {foo: '<',bar: '<'},template: ` <div></div> `,controller: classextendsNgComponent<Props,State>{
...
}}

Full Example

importNgComponentfrom'ngcomponent'interfaceProps{data: number[]type: "bar"|"line"}interfaceState{chart: Chart}constchartJSWrapper={bindings: {data: '<',type: '<'},template: `<canvas></canvas>`,constructor(private$element: JQuery){}controller: classextendsNgComponent<Props,State>{componentDidMount(){this.state.chart=newChart($element.find('canvas'),{data: props.data,type: props.type})}render(){this.state.chart.data=this.props.datathis.state.chart.type=this.props.typethis.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

# Just watch TypeScript:
npm run watch
# Or, watch TypeScript and run tests on change:
npm run tdd

License

Apache 2.0