Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Angular to React: The easiest way to embed Angular components in a React app

angular2react Build Status NPM Apache2

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

1. Save a reference to the $injector

let $injector
angular
  .module('myModule')
  .run(['$injector', function(_$injector) { $injector = _$injector }])

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
  .module('myModule', [])
  .component('myComponent', MyComponent)

4. Convert it to a React Component

import { angular2react } from 'angular2react'

const MyComponent = angular2react('myComponent', MyComponent, $injector)

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:

import { angular2react } from 'angular2react'

const MyComponent = angular2react('myComponent', 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

About

One line of code to turn any Angular 1 Component into a React Component

Topics

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.