After initiating a timer within an Angular 2 component located inside a router outlet, I encounter a problem when switching routes. The timer continues to run even after leaving the route. How can I ensure that the timer is properly stopped upon route change?
setInterval(() => {
...
}, 10000);
To stop the interval in this particular situation, you can utilize a hook. In my case, I manage it within the component/view structure.
export class TestInterval implements OnInit, OnDestroy {
public timerInterval: any;
ngOnInit() {
// The interval scope needs to be accessible within the component for clearing it upon component destruction.
this.timerInterval = setInterval(function(){...}, 10000);
}
ngOnDestroy() {
// This will clear the interval when the component is no longer needed, like when navigating away from a route.
clearInterval(this.timerInterval);
}
}
Here's the solution:
activateRouter() {
this.timer = setInterval(()=>{
...
}, 10000);
}
deactivateRouter() {
clearInterval(this.timer);
}
Consider using the OnDeactivate feature from the angular2/router library (and possibly also OnActivate based on your specific needs) for managing the timer when a user navigates away from the current route.
export Compnent implements OnInit, OnDeactivate {
private timer;
ngOnInit(){
this.timer = setInterval(_ => {
// perform actions
}, 10000);
}
routerOnDeactivate() {
clearInterval(this.timer);
}
}
I have successfully implemented a feature where clicking the "add to my stay" button displays the name and price data. Subsequently, it automatically changes to a remove button when clicked again for another addon. If I press the remove button of the first ...
Why am I not receiving any error notifications even when there is an error message in the response object? $.ajax(settings).done(function (response) { if ( "error_message" in response ) { console.log(response); $.notify(" ...
My npm start suddenly stopped working. This issue arose after I switched to an unused branch with unrelated histories, made some changes, pushed them (unaware that the branch was outdated), then used git checkout -f "" to go back to the recent br ...
My goal is to display the Twitter timeline of multiple accounts based on the route. I initially attempted to use a plugin called vue-tweet-embed, but encountered issues with it. As a result, I resorted to the traditional method by embedding twitter's ...
I am currently working on a basic blockchain project to practice my skills with nodejs. I have created a blockchain object that consists of a block class, and now I want to loop through this object using pug. app.get('/', function(request, respon ...
I recently encountered an issue with my code. I am using an array of objects in my state, and when I delete an item from the array, the component does not render correctly without the deleted object. Additionally, when I try to open another object (trigger ...
How can I conditionally add the title attribute to a div without creating another div and using ngIf? If the permission is true, I want to include a title in my div. Here's what my current div looks like: <div (click)="goToChangelog()&quo ...
Incorporating a bootstrap theme into my project has required me to include several javascript files. The challenge arises when some pages load dynamic content from the server, resulting in the entire HTML not being present when the javascript files are exe ...
When using an AJAX call to load content, primarily images, I encountered a challenge. I wanted the div to fade in only after all the images were fully loaded. To achieve this, I made use of .ready method in jQuery. However, it seemed like the images were n ...
I used an "IF" statement to display dynamic text - if it's null, show something, otherwise show something else. However, I am getting a blank result. What did I do wrong? <View style={styles.rightContainer}> { () =>{ if(t ...
In my React app, I have set up ml5.js to train a model by clicking on one button and make predictions with another. However, I encounter an error when trying to test the model for the second time: TypeError: Cannot read property 'classify' of und ...
Every time I try to send a POST request to the server, it always responds with an unexpected OPTIONS. My login application built with React and Apollo is experiencing issues. Upon form submission, a mutation should be sent to the server via a POST request ...
Within my navigation div, there exists another div called login. Through the use of JavaScript, I have implemented a functionality that reveals additional divs such as login_name_field, login_pw_field, register_btn, do_login_btn, and hide_login upon clicki ...
I am currently developing a JavaScript application and came across a helpful library called qtip2. My objective is to have different information displayed when the user hovers over each cell in the table. The qtip2 library I mentioned earlier can display ...
My objective is to create a button that, when clicked, triggers a function to alter the styling of the HTML tag as well as the text or innerHTML of the button itself. Sounds simple enough, right? Unfortunately... The HTML: <!DOCTYPE html> <html& ...
I have implemented a night mode (or perhaps dark mode) toggle button located at the top-right corner of my webpage. Here is a link to a perfect example showcasing what I am aiming for However, unlike the provided link, I switch between night mode and lig ...
I have the following array of mergeUniqueItems: var mergeUniqueItems = ["-JsDEcxz_ZSGFLKwd1QM", "-JsJ2NXGDYKI6QRsuXVK", "-JsJ2RK-kOG2eGcG04xF", "-JsJ2RK-kOG2eGcG04xF", "-JsJ2YLPiP6751zh8geS"] After using this code snippet, I encountered an issue: ...
Using the Expo platform has been a great experience for me. Here is a snippet from my tsconfig.json: { "compilerOptions": { "paths": { "@/*": [ "./src/*" ], ...
Is there an issue with this code snippet? I am receiving a syntax error on line 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <script src="http:/ ...
I am in the process of upgrading from Angular version 2.4.0 to Angular 4, and encountered some peer dependency errors along the way: Attempting to install the latest datepicker component: npm install ng2-datepicker –save Resulted in the following erro ...