Access your Angular application from within React.
npm install angular-react-demoAccess your Angular application from within React.
```
npm install angular-react react prop-types react-dom
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`
`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`
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 (
Count direction from CounterService: {Counter.getCount()}
Count from resolve: {count}
Original count (without watchers) from resolve: {originalCount}
// Register the component to be available in Angular
registerReactComponent(app, 'reactCounter', connect(ReactCounter))
``html``