tlvine-ngcomponent

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 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