One line of code to turn any Angular 1 Component into a React Component (opposite of react2angular)
# Using Yarn:
yarn add angular2react angular angular-resource react react-dom @types/angular @types/react @types/react-dom
# Or, using NPM:
npm install angular2react angular angular-resource react react-dom @types/angular @types/react @types/react-dom --savelet $injector
angular
.module('myModule')
.run(['$injector', function(_$injector) { $injector = _$injector }])const MyComponent = {
bindings: {
fooBar: '<',
baz: '<'
},
template: `
<p>FooBar: {this.$ctrl.fooBar}</p>
<p>Baz: {this.$ctrl.baz}</p>
`
}angular
.module('myModule', [])
.component('myComponent', MyComponent)import { angular2react } from 'angular2react'
const MyComponent = angular2react('myComponent', MyComponent, $injector)<MyComponent fooBar={3} baz='baz' />We need a reference to the $injector created by the Angular module that registered the Angular component you're exposing. That way we can manually compile your component.
If you use ngimport, you can skip step 1 and omit the last argument in step 4:
import { angular2react } from 'angular2react'
const MyComponent = angular2react('myComponent', MyComponent)https://github.com/bcherny/angular2react-demos
- Only one way bindings (
<) are supported, because this is the only type of binding that React supports - Be sure to bootstrap your Angular app before rendering its React counterpart
npm testApache-2.0