Nietzsche's Preposterous Moustache

npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

tlvine-ngcomponent

3.0.4 • Public • Published

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

install

npm i tlvine-ngcomponent

Downloadsweekly downloads

4

version

3.0.4

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability