refreshing data on page every X seconds for angular component
I need to refresh data of angular component each 30 seconds. I use simple setInterval:
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
However, this is incorrect, because even when I navigate to another "page" (in angular SPA everything is one page, so it is not really another page), refresh is happening each 30 seconds.
What is the correct way to refresh data every 30 seconds only when on specific page/component?
javascript
angular single-page-application asked Nov 27 '18 at 7:45
renathyrenathy
1,9071056109
add a comment |
I need to refresh data of angular component each 30 seconds. I use simple setInterval:
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
However, this is incorrect, because even when I navigate to another "page" (in angular SPA everything is one page, so it is not really another page), refresh is happening each 30 seconds.
What is the correct way to refresh data every 30 seconds only when on specific page/component?
javascript
angular single-page-application asked Nov 27 '18 at 7:45
renathyrenathy
1,9071056109
This article will help you : stackoverflow.com/questions/44947551/…
– Joel Joseph
Nov 27 '18 at 7:48
add a comment |
I need to refresh data of angular component each 30 seconds. I use simple setInterval:
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
However, this is incorrect, because even when I navigate to another "page" (in angular SPA everything is one page, so it is not really another page), refresh is happening each 30 seconds.
What is the correct way to refresh data every 30 seconds only when on specific page/component?
javascript
angular single-page-application asked Nov 27 '18 at 7:45
renathyrenathy
1,9071056109
I need to refresh data of angular component each 30 seconds. I use simple setInterval:
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
However, this is incorrect, because even when I navigate to another "page" (in angular SPA everything is one page, so it is not really another page), refresh is happening each 30 seconds.
What is the correct way to refresh data every 30 seconds only when on specific page/component?
javascript
angular single-page-application javascript
angular single-page-application asked Nov 27 '18 at 7:45
renathyrenathy
1,9071056109
asked Nov 27 '18 at 7:45
renathyrenathy
1,9071056109
asked Nov 27 '18 at 7:45
renathyrenathy
1,9071056109
asked Nov 27 '18 at 7:45
renathyrenathy
1,9071056109
asked Nov 27 '18 at 7:45
renathyrenathy
1,9071056109
1,9071056109
This article will help you : stackoverflow.com/questions/44947551/…
– Joel Joseph
Nov 27 '18 at 7:48
add a comment |
This article will help you : stackoverflow.com/questions/44947551/…
– Joel Joseph
Nov 27 '18 at 7:48
This article will help you : stackoverflow.com/questions/44947551/…
– Joel Joseph
Nov 27 '18 at 7:48
This article will help you : stackoverflow.com/questions/44947551/…
– Joel Joseph
Nov 27 '18 at 7:48
add a comment |
4 Answers
4
active
oldest
votes
You could destroy interval on OnDestroy life cycle hook of the component.
Using clearInterval(this.interval)
ngOnDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
}
answered Nov 27 '18 at 7:51
ptesserptesser
224410
Seems similer answer of mine
– Pardeep Jain
Nov 27 '18 at 7:52
I know, because we wrote on the same time, more less.
– ptesser
Nov 27 '18 at 8:02
Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right?
– renathy
Nov 27 '18 at 8:31
Yes, for the editor you should implementsOnDestroyand it's the best approach. For the final result you could avoid it because at runtime Javascript lose interfaces declared with Typescript. But the best practice is to insert it.
– ptesser
Nov 27 '18 at 8:51
add a comment |
try this.
routerOnActivate() {
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
}
routerOnDeactivate() {
clearInterval(this.interval);
}
answered Nov 27 '18 at 7:49
Farhat ZamanFarhat Zaman
591310
add a comment |
When you navigate to another page, you have to clear the interval you are setting.
this.interval = setInterval(()=>{
...
});
navigateToAnotherPage = () => {
//function to navigate to another page
clearInterval(this.interval);
router.navigate(...)//if you are using router to navigate
}
answered Nov 27 '18 at 7:51
theapologisttheapologist
576215
What isnavigateToAnotherPagehere? when this is being called?
– Pardeep Jain
Nov 27 '18 at 7:52
Whatever the questioner is using to navigate to another page. Perhaps a function call that navigates usingrouter.navigate. Not sure how the navigation is happening as it is not mentioned in the OP.
– theapologist
Nov 27 '18 at 7:54
@PardeepJain but yeah I agree with your solution.ngOnDestroyseems like a more generic fix.
– theapologist
Nov 27 '18 at 7:55
Thanks, but this is not Angular specific so asked.
– Pardeep Jain
Nov 27 '18 at 7:56
add a comment |
You could clearInterval in ngOnDestroy life cycle hook of component
ngOnDestroy() {
clearInterval(this.interval);
}
ngOnDestroywill call every time component destroy in digest cycle and it will clear your interval as well (If you do so).
Generally used to call logic which we don't require after navigation of current route to another.
answered Nov 27 '18 at 7:50
Pardeep JainPardeep Jain
40.8k17103142
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%2f53494918%2frefreshing-data-on-page-every-x-seconds-for-angular-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
You could destroy interval on OnDestroy life cycle hook of the component.
Using clearInterval(this.interval)
ngOnDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
}
answered Nov 27 '18 at 7:51
ptesserptesser
224410
Seems similer answer of mine
– Pardeep Jain
Nov 27 '18 at 7:52
I know, because we wrote on the same time, more less.
– ptesser
Nov 27 '18 at 8:02
Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right?
– renathy
Nov 27 '18 at 8:31
Yes, for the editor you should implementsOnDestroyand it's the best approach. For the final result you could avoid it because at runtime Javascript lose interfaces declared with Typescript. But the best practice is to insert it.
– ptesser
Nov 27 '18 at 8:51
add a comment |
You could destroy interval on OnDestroy life cycle hook of the component.
Using clearInterval(this.interval)
ngOnDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
}
answered Nov 27 '18 at 7:51
ptesserptesser
224410
Seems similer answer of mine
– Pardeep Jain
Nov 27 '18 at 7:52
I know, because we wrote on the same time, more less.
– ptesser
Nov 27 '18 at 8:02
Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right?
– renathy
Nov 27 '18 at 8:31
Yes, for the editor you should implementsOnDestroyand it's the best approach. For the final result you could avoid it because at runtime Javascript lose interfaces declared with Typescript. But the best practice is to insert it.
– ptesser
Nov 27 '18 at 8:51
add a comment |
You could destroy interval on OnDestroy life cycle hook of the component.
Using clearInterval(this.interval)
ngOnDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
}
answered Nov 27 '18 at 7:51
ptesserptesser
224410
You could destroy interval on OnDestroy life cycle hook of the component.
Using clearInterval(this.interval)
ngOnDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
}
answered Nov 27 '18 at 7:51
ptesserptesser
224410
answered Nov 27 '18 at 7:51
ptesserptesser
224410
answered Nov 27 '18 at 7:51
ptesserptesser
224410
answered Nov 27 '18 at 7:51
ptesserptesser
224410
224410
Seems similer answer of mine
– Pardeep Jain
Nov 27 '18 at 7:52
I know, because we wrote on the same time, more less.
– ptesser
Nov 27 '18 at 8:02
Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right?
– renathy
Nov 27 '18 at 8:31
Yes, for the editor you should implementsOnDestroyand it's the best approach. For the final result you could avoid it because at runtime Javascript lose interfaces declared with Typescript. But the best practice is to insert it.
– ptesser
Nov 27 '18 at 8:51
add a comment |
Seems similer answer of mine
– Pardeep Jain
Nov 27 '18 at 7:52
I know, because we wrote on the same time, more less.
– ptesser
Nov 27 '18 at 8:02
Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right?
– renathy
Nov 27 '18 at 8:31
Yes, for the editor you should implementsOnDestroyand it's the best approach. For the final result you could avoid it because at runtime Javascript lose interfaces declared with Typescript. But the best practice is to insert it.
– ptesser
Nov 27 '18 at 8:51
Seems similer answer of mine
– Pardeep Jain
Nov 27 '18 at 7:52
Seems similer answer of mine
– Pardeep Jain
Nov 27 '18 at 7:52
I know, because we wrote on the same time, more less.
– ptesser
Nov 27 '18 at 8:02
I know, because we wrote on the same time, more less.
– ptesser
Nov 27 '18 at 8:02
Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right?
– renathy
Nov 27 '18 at 8:31
Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right?
– renathy
Nov 27 '18 at 8:31
Yes, for the editor you should implements
OnDestroy and it's the best approach. For the final result you could avoid it because at runtime Javascript lose interfaces declared with Typescript. But the best practice is to insert it.– ptesser
Nov 27 '18 at 8:51
Yes, for the editor you should implements
OnDestroy and it's the best approach. For the final result you could avoid it because at runtime Javascript lose interfaces declared with Typescript. But the best practice is to insert it.– ptesser
Nov 27 '18 at 8:51
add a comment |
try this.
routerOnActivate() {
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
}
routerOnDeactivate() {
clearInterval(this.interval);
}
answered Nov 27 '18 at 7:49
Farhat ZamanFarhat Zaman
591310
add a comment |
try this.
routerOnActivate() {
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
}
routerOnDeactivate() {
clearInterval(this.interval);
}
answered Nov 27 '18 at 7:49
Farhat ZamanFarhat Zaman
591310
add a comment |
try this.
routerOnActivate() {
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
}
routerOnDeactivate() {
clearInterval(this.interval);
}
answered Nov 27 '18 at 7:49
Farhat ZamanFarhat Zaman
591310
try this.
routerOnActivate() {
this.interval = setInterval(() => {
this.refresh(); // api call
}, 10000);
}
routerOnDeactivate() {
clearInterval(this.interval);
}
answered Nov 27 '18 at 7:49
Farhat ZamanFarhat Zaman
591310
answered Nov 27 '18 at 7:49
Farhat ZamanFarhat Zaman
591310
answered Nov 27 '18 at 7:49
Farhat ZamanFarhat Zaman
591310
answered Nov 27 '18 at 7:49
Farhat ZamanFarhat Zaman
591310
591310
add a comment |
add a comment |
When you navigate to another page, you have to clear the interval you are setting.
this.interval = setInterval(()=>{
...
});
navigateToAnotherPage = () => {
//function to navigate to another page
clearInterval(this.interval);
router.navigate(...)//if you are using router to navigate
}
answered Nov 27 '18 at 7:51
theapologisttheapologist
576215
What isnavigateToAnotherPagehere? when this is being called?
– Pardeep Jain
Nov 27 '18 at 7:52
Whatever the questioner is using to navigate to another page. Perhaps a function call that navigates usingrouter.navigate. Not sure how the navigation is happening as it is not mentioned in the OP.
– theapologist
Nov 27 '18 at 7:54
@PardeepJain but yeah I agree with your solution.ngOnDestroyseems like a more generic fix.
– theapologist
Nov 27 '18 at 7:55
Thanks, but this is not Angular specific so asked.
– Pardeep Jain
Nov 27 '18 at 7:56
add a comment |
When you navigate to another page, you have to clear the interval you are setting.
this.interval = setInterval(()=>{
...
});
navigateToAnotherPage = () => {
//function to navigate to another page
clearInterval(this.interval);
router.navigate(...)//if you are using router to navigate
}
answered Nov 27 '18 at 7:51
theapologisttheapologist
576215
What isnavigateToAnotherPagehere? when this is being called?
– Pardeep Jain
Nov 27 '18 at 7:52
Whatever the questioner is using to navigate to another page. Perhaps a function call that navigates usingrouter.navigate. Not sure how the navigation is happening as it is not mentioned in the OP.
– theapologist
Nov 27 '18 at 7:54
@PardeepJain but yeah I agree with your solution.ngOnDestroyseems like a more generic fix.
– theapologist
Nov 27 '18 at 7:55
Thanks, but this is not Angular specific so asked.
– Pardeep Jain
Nov 27 '18 at 7:56
add a comment |
When you navigate to another page, you have to clear the interval you are setting.
this.interval = setInterval(()=>{
...
});
navigateToAnotherPage = () => {
//function to navigate to another page
clearInterval(this.interval);
router.navigate(...)//if you are using router to navigate
}
answered Nov 27 '18 at 7:51
theapologisttheapologist
576215
When you navigate to another page, you have to clear the interval you are setting.
this.interval = setInterval(()=>{
...
});
navigateToAnotherPage = () => {
//function to navigate to another page
clearInterval(this.interval);
router.navigate(...)//if you are using router to navigate
}
answered Nov 27 '18 at 7:51
theapologisttheapologist
576215
edited Nov 27 '18 at 7:57
answered Nov 27 '18 at 7:51
theapologisttheapologist
576215
answered Nov 27 '18 at 7:51
theapologisttheapologist
576215
answered Nov 27 '18 at 7:51
theapologisttheapologist
576215
576215
What isnavigateToAnotherPagehere? when this is being called?
– Pardeep Jain
Nov 27 '18 at 7:52
Whatever the questioner is using to navigate to another page. Perhaps a function call that navigates usingrouter.navigate. Not sure how the navigation is happening as it is not mentioned in the OP.
– theapologist
Nov 27 '18 at 7:54
@PardeepJain but yeah I agree with your solution.ngOnDestroyseems like a more generic fix.
– theapologist
Nov 27 '18 at 7:55
Thanks, but this is not Angular specific so asked.
– Pardeep Jain
Nov 27 '18 at 7:56
add a comment |
What isnavigateToAnotherPagehere? when this is being called?
– Pardeep Jain
Nov 27 '18 at 7:52
Whatever the questioner is using to navigate to another page. Perhaps a function call that navigates usingrouter.navigate. Not sure how the navigation is happening as it is not mentioned in the OP.
– theapologist
Nov 27 '18 at 7:54
@PardeepJain but yeah I agree with your solution.ngOnDestroyseems like a more generic fix.
– theapologist
Nov 27 '18 at 7:55
Thanks, but this is not Angular specific so asked.
– Pardeep Jain
Nov 27 '18 at 7:56
What is
navigateToAnotherPage here? when this is being called?– Pardeep Jain
Nov 27 '18 at 7:52
What is
navigateToAnotherPage here? when this is being called?– Pardeep Jain
Nov 27 '18 at 7:52
Whatever the questioner is using to navigate to another page. Perhaps a function call that navigates using
router.navigate. Not sure how the navigation is happening as it is not mentioned in the OP.– theapologist
Nov 27 '18 at 7:54
Whatever the questioner is using to navigate to another page. Perhaps a function call that navigates using
router.navigate. Not sure how the navigation is happening as it is not mentioned in the OP.– theapologist
Nov 27 '18 at 7:54
@PardeepJain but yeah I agree with your solution.
ngOnDestroy seems like a more generic fix.– theapologist
Nov 27 '18 at 7:55
@PardeepJain but yeah I agree with your solution.
ngOnDestroy seems like a more generic fix.– theapologist
Nov 27 '18 at 7:55
Thanks, but this is not Angular specific so asked.
– Pardeep Jain
Nov 27 '18 at 7:56
Thanks, but this is not Angular specific so asked.
– Pardeep Jain
Nov 27 '18 at 7:56
add a comment |
You could clearInterval in ngOnDestroy life cycle hook of component
ngOnDestroy() {
clearInterval(this.interval);
}
ngOnDestroywill call every time component destroy in digest cycle and it will clear your interval as well (If you do so).
Generally used to call logic which we don't require after navigation of current route to another.
answered Nov 27 '18 at 7:50
Pardeep JainPardeep Jain
40.8k17103142
add a comment |
You could clearInterval in ngOnDestroy life cycle hook of component
ngOnDestroy() {
clearInterval(this.interval);
}
ngOnDestroywill call every time component destroy in digest cycle and it will clear your interval as well (If you do so).
Generally used to call logic which we don't require after navigation of current route to another.
answered Nov 27 '18 at 7:50
Pardeep JainPardeep Jain
40.8k17103142
add a comment |
You could clearInterval in ngOnDestroy life cycle hook of component
ngOnDestroy() {
clearInterval(this.interval);
}
ngOnDestroywill call every time component destroy in digest cycle and it will clear your interval as well (If you do so).
Generally used to call logic which we don't require after navigation of current route to another.
answered Nov 27 '18 at 7:50
Pardeep JainPardeep Jain
40.8k17103142
You could clearInterval in ngOnDestroy life cycle hook of component
ngOnDestroy() {
clearInterval(this.interval);
}
ngOnDestroywill call every time component destroy in digest cycle and it will clear your interval as well (If you do so).
Generally used to call logic which we don't require after navigation of current route to another.
answered Nov 27 '18 at 7:50
Pardeep JainPardeep Jain
40.8k17103142
edited Nov 28 '18 at 5:35
answered Nov 27 '18 at 7:50
Pardeep JainPardeep Jain
40.8k17103142
answered Nov 27 '18 at 7:50
Pardeep JainPardeep Jain
40.8k17103142
answered Nov 27 '18 at 7:50
Pardeep JainPardeep Jain
40.8k17103142
40.8k17103142
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%2f53494918%2frefreshing-data-on-page-every-x-seconds-for-angular-component%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
This article will help you : stackoverflow.com/questions/44947551/…
– Joel Joseph
Nov 27 '18 at 7:48