How to avoid counter multiplication when user reenter the component?

Question

I'm using angular-user-idle npm package to track browser inactive status and display a session out popup on preset timeout . The library works well when you do not redirect from that particular component on timeout. When you redirect to home page or similar one and reenter the same earlier component and if timeout happens this time, popup appear multiple time now.

Now in order to explain you this, I have displayed counter number during 1st load of component and 2nd load of the component in the screenshots below. If you carefully look at second image number of each counter is appearing twice. What is the reason for it same is resulting in popup appearing multiple times? How can I avoid it?

  ngOnInit() {

//Start watching for user inactivity.
this.restart();
this.userIdle.startWatching();


// Start watching when user idle is starting.
this.userIdle.onTimerStart().subscribe(count => console.log(count));

// Start watch when time is up.
this.userIdle.onTimeout().subscribe(() => {

  this.openGenericDialog('GenericAlert', "Your session is expired!");


  this.dialogRef.afterClosed().subscribe(
    result => {
      this.dialogResult = result;

      this.stopWatching()
      this.stop();

      this.createUpdateLoggedInRecord('Simulation', 
this.varUser.UserKeyID, false);
      this.router.navigateByUrl('/authentication');
    });

}

);


  }

  stop() {
this.userIdle.stopTimer();
  }

  stopWatching() {
this.userIdle.stopWatching();
  }

  restart() {
this.userIdle.resetTimer();
  }

Answer 1

I think you might have a memory leak because you don't keep track of your subscriptions.

this.userIdle.onTimeout().subscribe(() => {
...

^^ This.

Should be this (vv)

this.userIdle.onTimeout()
    .pipe(take(1))
    .subscribe(() => {
    ...