Skip to content

coatue-oss/angular2react

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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