Skip to content

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

License

Notifications You must be signed in to change notification settings

coatue-oss/angular2react

Repository files navigation

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

angular2react Build StatusNPMApache2

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$injectorangular.module('myModule').run(['$injector',function(_$injector){$injector=_$injector}])

2. Create an Angular component

constMyComponent={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'constMyComponent=angular2react('myComponent',MyComponent,$injector)

5. Use it in your React code

<MyComponentfooBar={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'constMyComponent=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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •