Angular 2+ Interaction between separate windows/tabs

Question

I've searched about this topic but couldn't find anything relevant. I would like to know if, using Angular 2+ (optimally v5.4.2), something like this is possible.

Let me define a quick use case :

I have an app with multiple routes,

open a browser on app/route1 (window1),

open a second browser window on app/route2 (window2)

have a user input on window2

change data/ui on window1 according to the previous input.

Again, I don't even know if that is possible so even a simple "You can't" is ok with me.

Thanks.

Did you try: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service — Krishna Mohan, Jun 15 '18 at 12:10
It is possible if you save the input to your db and have some `timer` running in background which fetches data from the the `db` at regular intervals — Ashish Ranjan, Jun 15 '18 at 12:20
You could go for a realtime database like firebase. This will of course mean you have to post the data to the server, but the data will be updated in the second window realtime (e.g. no refresh needed) — ChrisEenberg, Jun 15 '18 at 12:25
I don't know if you can use sockets (see an example to make a chat in https://medium.com/dailyjs/real-time-apps-with-typescript-integrating-web-sockets-node-angular-e2b57cbd1ec1 ) — Eliseo, Jun 15 '18 at 12:25

score 2 · Answer 1 · answered Jun 15 '18 at 12:20

2

Since it's not tested, I am not sure if it's working but have you tried using localStorage to do this? Otherwise, since a new window is always a new instance of the app, I don't think that anything directly in Angular would work (not sure though).

Otherwise, if you have a expressjs (or Node.js) server setup, you can store your data this way.

answered Jun 15 '18 at 12:20

Al Caulique

451
4
7

correct, `localStorage` will work if both the windows are from the same browser.. – Ashish Ranjan Jun 15 '18 at 12:22
Localstorage seems like a good way to do what I want. I'll try that, thanks – Askirkela Jun 15 '18 at 12:43

score 0 · Accepted Answer · answered Jun 15 '18 at 12:26

0

There is several ways to achieve this.

If window2 input is updating data on a remote server, you could use websockets or any other real time technology to notify window1 that your data has changed.

An other alternative would be to use localStorage. You should check out this stackoverflow post for more informations on that.

answered Jun 15 '18 at 12:26

Leo

741
6
14

Thanks for the link, I'll try with localstorage to see if it fits my needs. – Askirkela Jun 15 '18 at 12:44

Angular 2+ Interaction between separate windows/tabs

2 Answers2