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