title: Angular 6 ng-idle
body: <p>I have an Angular Project which is working well and I'm implementing NG-IDLE and KeepAlive in order to keep the session fresh and to log a user out before the API session expires.</p>
  
  <p>My issue is that the ng-idle is also operating on the login page, which is obviously not required, as when it does time out, it will take the person to the login page.</p>
  
  <p>So I have the ng-idle and KeepAlive up and running in my app.component.ts but since I'm using lazy loading, I also have an authentication.module.ts and a login.component.ts.</p>
  
  <p>The code in my root app.component.ts is as follows:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
  import { Keepalive } from '@ng-idle/keepalive';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
  
      idleState = 'Not started.';
      timedOut = false;
      lastPing?: Date = null;
  
      constructor(private idle: Idle, private keepalive: Keepalive) {
  
          // sets an idle timeout of 5 seconds, for testing purposes.
          idle.setIdle(5);
  
          // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
          idle.setTimeout(5);
  
          // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
          idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
  
          idle.onIdleEnd.subscribe(() =&gt; this.idleState = 'No longer idle.');
  
          idle.onTimeout.subscribe(() =&gt; {
              this.idleState = 'Timed out!';
              this.timedOut = true;
          });
  
          idle.onIdleStart.subscribe(() =&gt; this.idleState = 'You\'ve gone idle!');
          idle.onTimeoutWarning.subscribe((countdown) =&gt; this.idleState = 'You will time out in ' + countdown + ' seconds!');
  
          // Sets the ping interval to 15 seconds
          keepalive.interval(15);
  
          keepalive.onPing.subscribe(() =&gt; this.lastPing = new Date());
  
          this.reset();
      }
  
      reset() {
          this.idle.watch();
          this.idleState = 'Started.';
          this.timedOut = false;
      }
  }
  </code></pre>
  
  <p>I know I need to call idle.unwatch in order to prevent idle running and idle.watch when I need it to, but how can I either call these from the login or authentication module, or can I detect from the root app.component.ts?</p>
  
  <p>As no doubt you can tell that I'm new to Angular, so apologies if this is a rookie question.</p>