react-angular

Access your Angular application from within React.

$3

``
npm install angular-react react prop-types react-dom
`

$3

A typical React component receiving props

`js
import 'ngReact'
import angular from 'angular'
import {registerReactComponent} from 'react-angular'

const app = angular.module('your-project.react', ['react'])

function ExampleReactComponent (props) {
return (


registerReactComponent(app, 'exampleReactComponent', ExampleReactComponent)
`
`html

`

$3

`js
import 'ngReact'
import angular from 'angular'
import {
registerReactComponent,
reactify
} from 'react-angular'

const app = angular.module('your-project.react', ['react'])

app.component('exampleAngularComponent', {template: 'Angular inside React'})
const ExampleAngularComponent = reactify('exampleAngularComponent')

function ExampleReactComponent () {
return (


registerReactComponent(app, 'exampleReactNestingAngular', ExampleReactComponent)
`
`html

`

$3

A React component that depends on Angular services.

Assume a Counter service exists and the React component requires it

`js
import {
registerReactComponent,
compose,
$inject,
$resolve
} from 'react-angular';

const app = angular.module('your-project.react', ['react'])

// Define the component dependencies (resolves, services, etc)
const connect = compose(
// Inject angular services,
$inject('Counter'),

// Define data resolvers
$resolve({
// Resolve the current count and observe changes.
count: $resolve.watch(['Counter', Counter => Counter.getCount()]),
// Resolve the count upon component mount without watching changes
originalCount: ['Counter', Counter => Counter.getCount()]
})
)

// Your React component
function ReactConter ({Counter, count, originalCount}) {
return (


// Register the component to be available in Angular
registerReactComponent(app, 'reactCounter', connect(ReactCounter))
`
`html

``