
One line of code to turn any Angular 1 Component into a React Component (opposite of react2angular)
Installation
# 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 --save
Usage
$injector
1. Save a reference to the let $injectorangular
2. Create an Angular component
const MyComponent = bindings: fooBar: '<' baz: '<' template: ` <p>FooBar: {this.$ctrl.fooBar}</p> <p>Baz: {this.$ctrl.baz}</p> `
3. Expose it to Angular
angular
4. Convert it to a React Component
const MyComponent =
5. Use it in your React code
<MyComponent fooBar=3 baz='baz' />
Why step 1?
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:
const MyComponent =
Full Examples
https://github.com/bcherny/angular2react-demos
Caveats
- 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
Tests
npm test
License
Apache-2.0