Interaction between Angular and React apps

Question

In my application, I've 2 apps on the same page - one is Angular app and the other is a React app.

The Angular app is the sidebar and the React app is main component. Both of these apps need information from each other. Is this possible?

I'd want to avoid using local storage or server side for this as the shared information is very dynamic and changes frequently(e.g - clicking a button in angular app triggering behaviour in React app).

The reason I've 2 apps on the same page is because I'm migrating a bigger angular application to react. But the whole thing has active users and I'm doing it in components.

If it's possible, it'd be very helpful to get some examples. Thanks!

Use global variables (temporary solution)

Just code
– Just code

2019-01-07 09:00:58 +00:00
Commented Jan 7, 2019 at 9:00 — Just code
– Just code, Commented Jan 7, 2019 at 9:00

Chaitanya Mankala · Accepted Answer · 2019-01-07 09:05:24Z

5

If you want to share data (in-memory), you can always use window variable.

like

in App 1: window.someVar = "hello"
in App 2: console.log(window.someVar);

for angular you might want to deceive the ts transpiler by declaring window on top.

declare var window;

OR

If you want to communicate on event basis, dispatch and listen to events

Dispatch event (App 1):

  let evt = new CustomEvent('InterAppData', { data: "hello" });
  window.dispatchEvent(evt);

Subscribe to event (App 2):

window.addEventListener('InterAppData', (e) => {
  if (e.data) {
    console.log(e.data); //--> prints "hello"
  }
});

PS: Here App 1 and App 2 can be React and Angular or Vice-Versa.

answered Jan 7, 2019 at 9:05

Chaitanya Mankala

1,73418 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

daveywc Over a year ago

This needs to be detail: "hello", rather than data: "hello". and e.detail, rather than e.data

Collectives™ on Stack Overflow

Interaction between Angular and React apps

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related