Angular in a multi monitor environment

[Jürgen Stolz]

Hello,

I know that Angular is designed as single page app but what if the an app needs to show data 2 or 3 monitors?  The first monitor shows  as example a table with accidents and the second monitor shows always a map with the positions of the accidents.

A good example are the developer tools (F12) I could dock the window or move it to another screen, I think to start the same application in several browsers is in my opinion not a solution. 

To send data from one to the other window(s) I could use postmessage or perhaps I could use Intercom (https://www.npmjs.com/package/ng2-intercom) 

Is there a way to split an Angular app on multiple monitors? Did somebody know a working example?

Jürgen

[Sander Elias]

Hi Jurgen,

I answered this question long ago for Angular 1. The same answer still applies to current Angular.

For a large part, this is out of our control. But you can open new "windows", and there is some level of control on placement. However, the browser is still in charge, and if the user ticked the 'open new window in tab' that is what will happen.

For more info, search this group, there is more in there.

Regards

Sander

[Zlatko Đurić]

For what it's worth, this sounds like a viable scenario in controlled environment. Nothing to do with Angular specifically, though.

You mention accident reports and a map of them. I assume this means this will be running by trained operators who know how to follow instructions, or maybe public displays or similar.

In this case, it's ok to, say, open the dashboard with reports and offer "Open map window" action to the operator. You can then open another window with the app, pointing to your map module and let the operator arrange it to the appropriate window position.

All that remains is communicating between windows. There are several ways to do that, from service workers and the like, cross-window messaging if map was open as an iframe, some sort of WebRTC, even your backend environment, via, say, websockets, or even plain old polling.

As mentioned, none of this is angular-specific. Also, this assumes a scenario where the user is motivated to open two windows of your app, either by being a trained operator, or in case of a publicly available app, by having enough benefit and good instructions for using your site in such a way.

Shoot me a question about any of these if you're stuck with some detail.
Zlatko

[Jürgen Stolz]

Hi Zlatko,

I did not understand why you said it is not Angular specific. I wrote an Angular app witch contains several Angular (View) components and this Views I need to show on several monitors. So everything is inside Angular, shure I could open another window but that is not I want, I want to open the Angular (View) component (.css, .html) in an other (new) window.

 @Sander I will search your answer and check if it fit my needs.

I try again :) describing my problem with multi monitor in a single app, using another example.

I developed an Angular application which contains >3 Angular components, every component uses Angular material, the main.css for styling and a data service which holds the data.

• First => Order component (table grid) contains a lot of data > 1000 rows (example) and the user always need to see this table
• Second => Order detail component, shown after a click. As the name said this are the details of the order and the user could show or modify details of the order.
• Third => a component which shows trips (table)
• Forth => a map component (shows orders, trips, or whatever was selected)

In the application everything works but the user always need to switch back to the First component if he wants to see the OrderGrid again. I do not like this behaviour, so I changed the application and show 2 components side by side. Shure this works too, but if the the user shows all possible columns of the OrderGrid there isn´t enough space and it looks terrible. My next thought was, ok, I show the OrderDetails in a separate window on the second monitor and this is my problem I could not figure out how to use my application WITHOUT starting the application twice. (Perhaps this is not possible??)

The next step, the user use the orders and plan a trip. Trip is the third component and should be displayed on the third monitor, this view should always be visible too, because sometimes events occour and they should displayed immediatley.

At the moment I use a data service to share the data between the components, this is perhaps a part which I need to change too (as you mentioned).

Best wishes

Jürgen

[Zlatko Đurić]

Jürgen,

That's exactly what I've said: you cannot have multiple windows without having multiple apps. Basic tech is not angular-specific: window.open, window.postMessage, window.opener, window.addEventListener('message', ...). Those are all parts of the regular JavaScript API.

So, basically, you start the app twice. But you can still communicate between the two windows, you can probably find a few good modules that do similar things on angular-specific way, or just JavaScript packages that you can wrap in an angular service. Here, here's a super-faulty and ugly demo of the base functionality, if I understood that correctly:

https://stackblitz.com/edit/angular-cross-window-messaging?file=app/parts.component.ts

Go there, click on the "map window" link, then you can "talk" between the two app instances.

[Jürgen Stolz]

Hi Zlatko,

thanks for the answer und the sample. I will play a little with this solution.

Best wishes

Jürgen