Angular handle code when move to another component

Question

I have angular component which rend some data and has button Go to Dashboard, but I have two options for move to next page. The first if the user does not click on the button GoDashobard application after 10 seconds automatically switches him to that link.

However, if the user still clicks on this button and goes to the next link, the timeout is triggered again after 10 seconds and it returns to that page or refreshes if it is already on it.

I tried to solve it via isClickGoToDashboard but it's calling again, probably because it loads on ngOnInit () after the first time.

How do I undo this after I click the button not to count the counter and call again?

ngOnInit(): void {
    if (!this.isClickGoToDashboard) {
      setTimeout(() => {
        this.router.navigateByUrl('home');
      }, 10000);
    }
  }

  goToDashboard() {
    this.isClickGoToDashboard = true;
    this.router.navigateByUrl('home');
  }

Answer 1

I think the answer of your question is clearTimeout and use it in this way

delayAction;
ngAfterViewInit() {
  this.delayAction = setTimeout(() => 
    this.goToDashboard();
  }, 10000);
}
goToDashboard() {
  clearTimeout(this.delayAction);
  this.router.navigateByUrl('home');
}