Using React in Angular Application

React and Angular are two popular front-end frameworks that have different approaches for building applications.
React is a lightweight library that focuses on building UI components,
while Angular is a more comprehensive framework, which includes features like dependency injection and routing.
This post explores how to use React in an Angular application.

Why use React in an Angular application?

Using React in an Angular application can provide numerous benefits and there are a few reasons to integrate them, including re-usability of components, compatibility with legacy code, and seamless integration with third-party libraries.

• Re-usability of components: React components can be easily reused across different applications, including Angular. By using React components in your Angular application, you can take advantage of the vast library of existing React components and save time and effort in building your components.
• Compatibility with legacy code: If you have an existing Angular application with a large codebase, it can be difficult to migrate to React. Using React components in your Angular applications allows you to gradually transition to React without having to rewrite all of your code,
  or even integrate a react legacy application in your own Angular code.
• Seamless integration with third-party libraries: React has a large ecosystem of third-party libraries and tools, which can be easily integrated into an Angular application. By using React components in your Angular application, you can take advantage of these libraries and tools without having to rewrite them in Angular.

How to use React in an Angular application?

Install the necessary dependencies.
1. You need to install react, react-dom, and their corresponding types for TypeScript support.

Do this with the following command:

npm install react react-dom
npm install typescript - save-dev @types/react @types/react-dom

2. Create a React component. hello-react-world.tsx

//tsx hello-react-world.tsx

import * as React from 'react';

const MyReactComponent = () => {
  return <h1>Hello, React world!</h1>;
};

export default MyReactComponent;

This component renders an h1 element with the text
“Hello, React world!”.

3. Create a wrapper directive to use this component in your Angular application.
This directive is responsible for rendering the React component and handling any necessary communication between the Angular and React parts of the application, such as props or listeners (Out of this Scope).
Use following code:

//ts ng-react.directive.ts

import {Directive, ElementRef, Input, OnDestroy} from '@angular/core';
import {createRoot, Root} from 'react-dom/client';

@Directive({
  standalone: true,
  selector: '[ngReact]'
})
export class NgReactDirective implements OnDestroy {
  @Input() set ngReact(path: string) {
    import(`${path}`)
      .then((comp) => this.root.render(comp.default()))
      .catch((e) => console.error(`Error while importing ${path}, Error: ${e}`));
  }

  private root: Root;

  constructor(private elm: ElementRef) {
     this.root = createRoot(elm.nativeElement);
  }

  ngOnDestroy(): void {
    this.root.unmount();
  }
}

4. Create a React root from the directive’s elementRef where we want to render the React component.
You also define an Input property that enables you to pass the path from the Angular component to fetch the React component.

5. Import the path and render the React component in the created root.

You also defined a ngOnDestroy method that handles the unmount of the React component once this section is destroyed.

If you use an older version of React, you can use the render method from react-dom, and the corresponding unmount.

Now lets use the React component in your app:

//ts app.component.ts

import {Component} from '@angular/core';
import {NgReactDirective} from '../app-react/ng-react.directive';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [NgReactDirective],
  template: `
    <div class="toolbar">
      <img width="40" alt="Angular Logo" src="assets/ng.svg"/>
    </div>
    <div class="content">
      <div [ngReact]="path"></div>
    </div>`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  path = './components/hello-react-world';
}

This component is straightforward and renders a header on the page.
In addition, it uses the new directive you created and passes a path to the React component we created.

** Reminder — To bootstrap a standalone component

//ts main.js
import {AppComponent} from './app/app.component';
import {bootstrapApplication} from '@angular/platform-browser';

bootstrapApplication(AppComponent)
  .catch(err => console.error(err));

Conclusion

You created a directive that lazy loads a React component.
(You can also lazy load the entire react code as well).
Within our Angular component, you called that directive and added React to the view.