4.1.0 • Published 6 years ago

ngcomponent v4.1.0

Weekly downloads
35,302
License
Apache-2.0
Repository
github
Last release
6 years ago

NgComponent Build Status npm mit

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