tlvine-ngcomponent
A clean React-like abstraction for rendering non-Angular components within an Angular app.
Last updated 2 years ago by tlvince .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install tlvine-ngcomponent 
SYNC missed versions from official npm registry.

NgComponent Build Status npm mit

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

Current Tags

  • 3.0.4                                ...           latest (2 years ago)

1 Versions

  • 3.0.4                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |