Angular 7 - leave confirmation
I was wondering if it's possible to trigger a leave confirmation when there is unsaved data on a certain module when the user clicks on a different module within your single page application. And if you could also trigger this when the user refreshes or leaves the webpage. How would you implement this?
Thanks in advance!
angular typescript angular7
edited Nov 26 '18 at 22:38
Goncalo Peres
1,3881419
asked Nov 19 '18 at 12:42
VincentVHVincentVH
35
add a comment |
I was wondering if it's possible to trigger a leave confirmation when there is unsaved data on a certain module when the user clicks on a different module within your single page application. And if you could also trigger this when the user refreshes or leaves the webpage. How would you implement this?
Thanks in advance!
angular typescript angular7
edited Nov 26 '18 at 22:38
Goncalo Peres
1,3881419
asked Nov 19 '18 at 12:42
VincentVHVincentVH
35
7
CanDeactivate guard is what you're looking for.
– SiddAjmera
Nov 19 '18 at 12:43
add a comment |
I was wondering if it's possible to trigger a leave confirmation when there is unsaved data on a certain module when the user clicks on a different module within your single page application. And if you could also trigger this when the user refreshes or leaves the webpage. How would you implement this?
Thanks in advance!
angular typescript angular7
edited Nov 26 '18 at 22:38
Goncalo Peres
1,3881419
asked Nov 19 '18 at 12:42
VincentVHVincentVH
35
I was wondering if it's possible to trigger a leave confirmation when there is unsaved data on a certain module when the user clicks on a different module within your single page application. And if you could also trigger this when the user refreshes or leaves the webpage. How would you implement this?
Thanks in advance!
angular typescript angular7
angular typescript angular7
edited Nov 26 '18 at 22:38
Goncalo Peres
1,3881419
asked Nov 19 '18 at 12:42
VincentVHVincentVH
35
edited Nov 26 '18 at 22:38
Goncalo Peres
1,3881419
asked Nov 19 '18 at 12:42
VincentVHVincentVH
35
edited Nov 26 '18 at 22:38
Goncalo Peres
1,3881419
edited Nov 26 '18 at 22:38
Goncalo Peres
1,3881419
edited Nov 26 '18 at 22:38
Goncalo Peres
1,3881419
1,3881419
asked Nov 19 '18 at 12:42
VincentVHVincentVH
35
asked Nov 19 '18 at 12:42
VincentVHVincentVH
35
asked Nov 19 '18 at 12:42
VincentVHVincentVH
35
35
7
CanDeactivate guard is what you're looking for.
– SiddAjmera
Nov 19 '18 at 12:43
add a comment |
7
CanDeactivate guard is what you're looking for.
– SiddAjmera
Nov 19 '18 at 12:43
7
7
CanDeactivate guard is what you're looking for.
– SiddAjmera
Nov 19 '18 at 12:43
CanDeactivate guard is what you're looking for.
– SiddAjmera
Nov 19 '18 at 12:43
add a comment |
1 Answer
1
active
oldest
votes
Confirmation for routing to another module can be easily implemented with CanDeactivate.
Refreshing and xing the tab can be a bit trickier. You will have to add listener to a window event beforeunload.
Something like this could work for a given component:
@HostListener('window:beforeunload', ['$event'])
unloadHandler(event: Event) {
// Your logic on beforeunload
}
answered Nov 19 '18 at 12:59
ritajritaj
1,512518
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%2f53374907%2fangular-7-leave-confirmation%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
Confirmation for routing to another module can be easily implemented with CanDeactivate.
Refreshing and xing the tab can be a bit trickier. You will have to add listener to a window event beforeunload.
Something like this could work for a given component:
@HostListener('window:beforeunload', ['$event'])
unloadHandler(event: Event) {
// Your logic on beforeunload
}
answered Nov 19 '18 at 12:59
ritajritaj
1,512518
add a comment |
Confirmation for routing to another module can be easily implemented with CanDeactivate.
Refreshing and xing the tab can be a bit trickier. You will have to add listener to a window event beforeunload.
Something like this could work for a given component:
@HostListener('window:beforeunload', ['$event'])
unloadHandler(event: Event) {
// Your logic on beforeunload
}
answered Nov 19 '18 at 12:59
ritajritaj
1,512518
add a comment |
Confirmation for routing to another module can be easily implemented with CanDeactivate.
Refreshing and xing the tab can be a bit trickier. You will have to add listener to a window event beforeunload.
Something like this could work for a given component:
@HostListener('window:beforeunload', ['$event'])
unloadHandler(event: Event) {
// Your logic on beforeunload
}
answered Nov 19 '18 at 12:59
ritajritaj
1,512518
Confirmation for routing to another module can be easily implemented with CanDeactivate.
Refreshing and xing the tab can be a bit trickier. You will have to add listener to a window event beforeunload.
Something like this could work for a given component:
@HostListener('window:beforeunload', ['$event'])
unloadHandler(event: Event) {
// Your logic on beforeunload
}
answered Nov 19 '18 at 12:59
ritajritaj
1,512518
answered Nov 19 '18 at 12:59
ritajritaj
1,512518
answered Nov 19 '18 at 12:59
ritajritaj
1,512518
answered Nov 19 '18 at 12:59
ritajritaj
1,512518
1,512518
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%2f53374907%2fangular-7-leave-confirmation%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
7
CanDeactivate guard is what you're looking for.
– SiddAjmera
Nov 19 '18 at 12:43