isabella232 / ngcomponent

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

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

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

# Just watch TypeScript:
npm run watch

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

License

Apache 2.0