title: NgIdle -Angular- How to stop the countdown value only when we click on dialog
body: <p>I have implemented a session timeout module in my angular app which monitors idle time and opens the session time out dialog and shows the countdown value on the dialog. The problem is count down value is stopping when ever i moved my mouse on that screen or atleast on touching that screen but i want to stop the countdown value on the dialog only when i click anything on the dialog not the screen . I thought this can be do this if we give the custom interrupts as shown in the below link <a href="https://programmingwithnaveen.com/tag/timeout/" rel="nofollow noreferrer">here</a></p>
  
  <p>For ex if i configure for only mouse click it can stop the countdown on the dialog, but that is not happening. May be that issue might be because of i am opening the session timeout dilaog from the another component. </p>
  
  <p>But i am not able to stop the count down , Here is my sample code</p>
  
  <pre><code>this.idle.onIdleStart.subscribe(() =&gt; {
    console.log('on idle start');
    let dialogRef;
  
    if (this.dialogRef === undefined || this.dialogRef === null) {
  
      dialogRef = this.dialog['open'](SessionTimeoutDialogComponent, {
        width: '30%',
        data: {idleTime: 10, timeoutTime: 10},
        panelClass: 'session-timeout-dialog'
      });
      this.dialogRef = dialogRef;
    }
  
    this.dialogRef.afterClosed().subscribe(result =&gt; {
      this.timeoutTime = result;
    });
    this.dialogRef = dialogRef;
  });
  
  
   this.idle.onTimeoutWarning.subscribe((countdown) =&gt; {
    this.timeoutTime = countdown;
    this.dataService.changeVersionSelectionData(countdown);
  
  });
  </code></pre>
  
  <p>Can anyone guide how can we do this ?</p>