Angular 2 - ng-idle timout even when user is interacting

Question

My problem is the popup comes even if the user is interacting with the application. The popup should come only when the user is idle.

session-timout.component.ts

    import { Component, OnInit } from '@angular/core';
            import { Idle, DEFAULT_INTERRUPTSOURCES} from '@ng-idle/core';
         // import { Keepalive } from '@ng-idle/Keepalive';


        @Component({
          selector: 'session-timeout',
          templateUrl: './sessionTimeout.component.html',
          styleUrls: ['./sessionTimeout.component.less']
        })

        export class SessionTimeoutComponent implements OnInit {
          idleState = 'Not started.';
          timedOut = false;
          //lastPing?: Date = null;
          showModal: boolean = false;
          sessionExt: String = "fail";
          maxTimeout = 60; //testing
          idleTime = 10; // testing
          currentTimeOut = 0;
          _model = ModelLocator.getInstance();
          private baseUrl_ssologout: string = "home.ts"
          constructor(public idle: Idle, /*private keepalive: Keepalive,*/ private sessionTimeoutService: SessionTimeoutService) {
            idle.watch();
            // sets an idle timeout of 5 seconds, for testing purposes.
            idle.setIdle(this.idleTime);

            // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
            idle.setTimeout(this.maxTimeout);

            // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
            // idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
            idle.onTimeout.subscribe(() => {
              if (this.showModal) {
                this.logout();
              }
            });
            idle.onIdleStart.subscribe(() => {
              this.showModal = true;
            });
            idle.onTimeoutWarning.subscribe((countdown) => {
              this.idleState = 'You\'ll logged out in ' + this.getRealCountdown(countdown);
              // idle.clearInterrupts();
            });
          }
    logout() {
        //logout
      }
    stayConnected() {
        this.idle.watch();
        this.idleState = 'Started.';
        this.timedOut = false;
        this.showModal = false;
      }
   }
}

app.component.html

<session-timeout></session-timeout>

<app-header></app-header>
<router-outlet></router-outlet>
<app-amex-footer></app-amex-footer>

If idle.setInterrupts(DEFAULT_INTERRUPTSOURCES) is enabled then the issue is that if the popup appears and user click anywhere on the page, the timer stops.

I need the popup should appear when the user is ideal and when the popup is displayed the user should be able to continue by clicking "Stay connected" button or logout.

Thanks.

Try to implement in app.component.ts or your layout file file — Vignesh, Mar 30 '17 at 09:12
I have included session-timeout selector in app.component.html — abhy, Mar 30 '17 at 10:48

score 3 · Answer 1 · answered Oct 23 '18 at 09:15

3

This is what that worked for me. Keep this before you do idle.watch(). (Uncomment the statement in your case)

idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

Then inside idle.onIdleStart.subscribe() method, before opening the modal add :

idle.clearInterrupts();

And finally, in the modalRef.result.then(), if the result is to 'continue' then set the interrupts back to defaults.

this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

answered Oct 23 '18 at 09:15

user1158831

533
2
6
12

This is not working for me ? can you please check this link . https://pastebin.com/i9MzMzZP – Roster Sep 10 '19 at 11:13
This does not work. Once clearInterrupts is called, I think the lib stops picking clicks and mouse events even if you followed that up with setInterrupts – Dibzmania Nov 13 '20 at 02:31

Angular 2 - ng-idle timout even when user is interacting

1 Answers1