1
  • Problem Statement:

I have a requirement: to open a new window in angular 6 and establish two way communication between the primary and secondary window.

  • What I tried

I created a service WindowRef to open a new window/tab using angular "Window". I created an @ngrx/store system to manage state in the app. I am able to manage application state for any number of actions in the primary window, however when I open a new window and try accessing the state, it returns null.

If I can maintain state I can try and use ngStore to dispatch actions and try and establish two way communication channel between the primary and secondary opened window.

Can someone please suggest/ point me to a way to implement the above requirement?

Immortal
  • 1,233
  • 4
  • 20
  • 47

1 Answers1

2

ngrx/store works in memory, meaning that if you refresh your page (or open a new tab) the current state in the Store will be lost.

If you want to communicate between both windows you can implement some sort of server side communication, e.g. firebase.

Another option without server would be to store the state/actions in your localStorage and listen to changes in the localStorage to update the state in a window.

timdeschryver
  • 14,415
  • 1
  • 19
  • 32
  • Thank you for the suggestion, I was able to communicate from Window 1 => Window 2 using the StateManegement and localStorage together. The issue I had was more communicating back from Window 2 => Window 1 (which completes the duplex communication). How do I listen to localStotrage changes in angular 6? Did you mean pub/sub model? – Immortal Nov 01 '18 at 22:35
  • I tried implementing to localStorage changes using this way https://stackoverflow.com/questions/46078714/watch-for-changes-in-localstorage-angular2 however, my scenario is that I am listening to localStorage changes in a different browser tab or window. Will this still work? because it does not, can you suggest – Immortal Nov 02 '18 at 00:30
  • mate it works like a charm, i used window.eventListerner to communicate and works like a gem. – Immortal Nov 02 '18 at 05:45
  • 2
    Awesome, thanks for answering your question when you found a solution. – timdeschryver Nov 02 '18 at 10:34