How to maintain communication among Multi window Angular App
I am creating an angular app which has two components, one takes some input and second shows it real time with the help of @Input() and @Output() decorators. Now I need to dock one component out to new browser window, so i can drag that component to another monitor screen.
I am using window.open() for docking out the component to new window, but it breaks the communication as it bootstrap a new app in that new window.
Is there any mechanism to keep the communication among multiple windows.
Any help or even small clue of how to do this is highly appreciated.
Thanks in advanced!
rxjs angular5
asked Nov 15 '18 at 13:47
Harsh MathurHarsh Mathur
193
add a comment |
I am creating an angular app which has two components, one takes some input and second shows it real time with the help of @Input() and @Output() decorators. Now I need to dock one component out to new browser window, so i can drag that component to another monitor screen.
I am using window.open() for docking out the component to new window, but it breaks the communication as it bootstrap a new app in that new window.
Is there any mechanism to keep the communication among multiple windows.
Any help or even small clue of how to do this is highly appreciated.
Thanks in advanced!
rxjs angular5
asked Nov 15 '18 at 13:47
Harsh MathurHarsh Mathur
193
add a comment |
I am creating an angular app which has two components, one takes some input and second shows it real time with the help of @Input() and @Output() decorators. Now I need to dock one component out to new browser window, so i can drag that component to another monitor screen.
I am using window.open() for docking out the component to new window, but it breaks the communication as it bootstrap a new app in that new window.
Is there any mechanism to keep the communication among multiple windows.
Any help or even small clue of how to do this is highly appreciated.
Thanks in advanced!
rxjs angular5
asked Nov 15 '18 at 13:47
Harsh MathurHarsh Mathur
193
I am creating an angular app which has two components, one takes some input and second shows it real time with the help of @Input() and @Output() decorators. Now I need to dock one component out to new browser window, so i can drag that component to another monitor screen.
I am using window.open() for docking out the component to new window, but it breaks the communication as it bootstrap a new app in that new window.
Is there any mechanism to keep the communication among multiple windows.
Any help or even small clue of how to do this is highly appreciated.
Thanks in advanced!
rxjs angular5
rxjs angular5
asked Nov 15 '18 at 13:47
Harsh MathurHarsh Mathur
193
asked Nov 15 '18 at 13:47
Harsh MathurHarsh Mathur
193
asked Nov 15 '18 at 13:47
Harsh MathurHarsh Mathur
193
asked Nov 15 '18 at 13:47
Harsh MathurHarsh Mathur
193
asked Nov 15 '18 at 13:47
Harsh MathurHarsh Mathur
193
193
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Use window.postMessage to communicate between windows.
As you are using window.open, you will be able to get a reference to the window to communicate with,
Be careful to also handle security concerns with postMessage to ensure you are receiving events from the correct source.
more info:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
answered Nov 15 '18 at 19:46
Steverob2kSteverob2k
34428
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320897%2fhow-to-maintain-communication-among-multi-window-angular-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use window.postMessage to communicate between windows.
As you are using window.open, you will be able to get a reference to the window to communicate with,
Be careful to also handle security concerns with postMessage to ensure you are receiving events from the correct source.
more info:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
answered Nov 15 '18 at 19:46
Steverob2kSteverob2k
34428
add a comment |
Use window.postMessage to communicate between windows.
As you are using window.open, you will be able to get a reference to the window to communicate with,
Be careful to also handle security concerns with postMessage to ensure you are receiving events from the correct source.
more info:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
answered Nov 15 '18 at 19:46
Steverob2kSteverob2k
34428
add a comment |
Use window.postMessage to communicate between windows.
As you are using window.open, you will be able to get a reference to the window to communicate with,
Be careful to also handle security concerns with postMessage to ensure you are receiving events from the correct source.
more info:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
answered Nov 15 '18 at 19:46
Steverob2kSteverob2k
34428
Use window.postMessage to communicate between windows.
As you are using window.open, you will be able to get a reference to the window to communicate with,
Be careful to also handle security concerns with postMessage to ensure you are receiving events from the correct source.
more info:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
answered Nov 15 '18 at 19:46
Steverob2kSteverob2k
34428
answered Nov 15 '18 at 19:46
Steverob2kSteverob2k
34428
answered Nov 15 '18 at 19:46
Steverob2kSteverob2k
34428
answered Nov 15 '18 at 19:46
Steverob2kSteverob2k
34428
34428
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320897%2fhow-to-maintain-communication-among-multi-window-angular-app%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
