Have you ever wanted to use React components in an Angular application ? Or to start migrating an Angular app to React component-by-component ? Or simply use both at the same time ?

I developped ngx-react which allows you to do just that with ease.

It enables you to use your Angular components in React, and vice versa, quite transparently, and without boilerplate.

📐 Setup

Just declare a bridge, somewhere in your application:

import { NgxReactBridge } from 'ngx-react'; export const bridge = new NgxReactBridge() // bridge options: .addProvider(/** Add a global react provider here */); 

Use 🅰️ in ⚛️

Then, to use an Angular component in React, just import it like that:

const AsReact = bridge.toReact(MyAngularCommonent); // use it 👉 <AsReact prop={whatever} /> 

The generated ⚛️ component will take as props all the @Input()s of your 🅰️ component, and all the @Output()s, mapped to functions. (i.e. @Output() onThing: EventEmitter<string> will be mapped to prop onThing: (event: string) => void.

Use ⚛️ in 🅰️

To use a React component in Angular, you'll have to do a tiny bit more work... for instance if you have a React component:

function MyReactComponent(props: { data: string; dataChange: (evt: string) => void; }) { // [...] } 

Then magically convert it to its Angular counterpart like that:

@Directive({ selector: "my-react-component" }) export class MyReactComponent_Angular extends reactBridge.toAngular( MyReactComponent ) { // a bit of extra work: You will have to map the properties yourself  @Input() data!: string; @Output() dataChange = new EventEmitter(); } 

(the Angular compiler doesnt allow to build dynamic components... so we have to declare them statically)

Services

Just inject Angular services in React like that:

const service = useService(MyAngularService); 

Wrapping up

I'll write more about this when I have more time 👉 But please share your thought if you have some :)

More details on the ngx-react repository