Namespace, Primitive, Method

    angular2react
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.2 • Public • Published
    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

    Install

    npm i angular2react

    DownloadsWeekly Downloads

    5,346

    Version

    3.0.2

    License

    Apache-2.0

    Unpacked Size

    238 kB

    Total Files

    14

    Last publish

    Collaborators

    • bcherny