Angular ng2-idle subscribe on multiple pages

Question

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

export class Calender {

    idleState = 'Not started.';
    timedOut = false;
    lastPing?: Date = null;

    constructor(private idle: Idle, private keepalive: Keepalive) {


        idle.setIdle(30);

        idle.setTimeout(30);

        idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);


        idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');

        idle.onTimeout.subscribe(() => {

          this.timedOut = true;
       });

        idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!');
        idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!');

        keepalive.interval(15);

        this.reset();
    }
    reset() {
        this.idle.watch();
        this.idleState = 'Started.';
        this.timedOut = false;
    }

From above code which i am using from ng2-idle on how to implement a timeout on idle session, but from the code it is just implemented on a one page, but now i have over 5 pages in my angular 2 project, i need to put this code in every page to subscribe a timed out and start a counter? so that it start the counter on other page if time expires, it affects all

mruanova · Answer 1 · 2018-08-21T18:08:04.450

Here is an example for angular idle session expired timeout warning

import { Component } from '@angular/core';
import { EventTargetInterruptSource, Idle } from '@ng-idle/core';
import { ElementRef } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    idleState = 'NOT_STARTED';
    timedOut = false;
    lastPing?: Date = null;
    constructor(private element: ElementRef, private idle: Idle) {
        // sets an idle timeout of 15 minutes.
        idle.setIdle(900);
        // sets a timeout period of 5 minutes.
        idle.setTimeout(300);
        // sets the interrupts like Keydown, scroll, mouse wheel, mouse down, and etc
        const x = 'keydown DOMMouseScroll mousewheel mousedown touchstart touchmove scroll';
        idle.setInterrupts([new EventTargetInterruptSource(this.element.nativeElement, x)]);
        idle.onIdleEnd.subscribe(() => {
            this.idleState = 'NO_LONGER_IDLE';
        });
        idle.onTimeout.subscribe(() => {
            this.idleState = 'TIMED_OUT';
            this.timedOut = true;
            console.log('onTimeout');
        });
        idle.onIdleStart.subscribe(() => {
            this.idleState = 'IDLE_START';
            console.log('idleStart');
        });

        idle.onTimeoutWarning.subscribe((countdown: any) => {
            this.idleState = 'IDLE_TIME_IN_PROGRESS';
        });

        this.idle.watch();
        this.idleState = 'Started.';
        this.timedOut = false;
    }

    logOut() {
        this.idle.stop();
        this.idle.onIdleStart.unsubscribe();
        this.idle.onTimeoutWarning.unsubscribe();
        this.idle.onIdleEnd.unsubscribe();
        this.idle.onIdleEnd.unsubscribe();
    }
}

based on this source https://github.com/programmingwithnaveen/Session-Timeout

Angular ng2-idle subscribe on multiple pages

1 Answers1