https://github.com/coatue-oss/ngcomponent
A clean React-like abstraction for rendering non-Angular components within an Angular app.
https://github.com/coatue-oss/ngcomponent
angular react
Last synced: 12 months ago
JSON representation
A clean React-like abstraction for rendering non-Angular components within an Angular app.
- Host: GitHub
- URL: https://github.com/coatue-oss/ngcomponent
- Owner: coatue-oss
- License: other
- Created: 2016-07-09T02:45:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-25T17:24:59.000Z (over 7 years ago)
- Last Synced: 2024-10-12T03:27:28.244Z (over 1 year ago)
- Topics: angular, react
- Language: TypeScript
- Homepage:
- Size: 169 KB
- Stars: 16
- Watchers: 13
- Forks: 16
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# NgComponent [![Build Status][build]](https://circleci.com/gh/coatue-oss/ngcomponent) [![npm]](https://www.npmjs.com/package/ngcomponent) [![mit]](https://opensource.org/licenses/MIT)
[build]: https://img.shields.io/circleci/project/coatue-oss/ngcomponent.svg?branch=master&style=flat-square
[npm]: https://img.shields.io/npm/v/ngcomponent.svg?style=flat-square
[mit]: https://img.shields.io/npm/l/ngcomponent.svg?style=flat-square
> A clean React-like abstraction for rendering non-Angular components within an Angular app.
## Installation
```sh
# 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*
```ts
import NgComponent from 'ngcomponent'
interface Props {
foo: number
bar: string[]
}
interface State {}
const myComponent = {
bindings: {
foo: '<',
bar: '<'
},
template: `
`,
controller: class extends NgComponent {
...
}
}
```
## Full Example
```ts
import NgComponent from 'ngcomponent'
interface Props {
data: number[]
type: "bar"|"line"
}
interface State {
chart: Chart
}
const chartJSWrapper = {
bindings: {
data: '<',
type: '<'
},
template: ``,
constructor(private $element: JQuery){}
controller: class extends NgComponent {
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
```sh
npm test
```
## Hacking On It
```sh
# Just watch TypeScript:
npm run watch
# Or, watch TypeScript and run tests on change:
npm run tdd
```
## License
Apache 2.0