How to watch idle in ionic2 and angular2

Question

I wanna watch idle for input box, mouse event and entire page..if 5 min idle, I wanna do auto logout and go to initial log in page using ionic2 My ionic2 info is

global packages:

@ionic/cli-utils : 1.2.0
Cordova CLI      : 7.0.1
Ionic CLI        : 3.2.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.3.0
@ionic/cli-plugin-ionic-angular : 1.3.0
Cordova Platforms               : android 6.2.3
Ionic Framework                 : ionic-angular 3.2.1

System:

Node       : v6.10.3
OS         : Windows 10
Xcode      : not installed
ios-deploy : not installed
ios-sim    : not installed

Answer 1

install typescript first, npm install -g [email protected]
second install ng-idle
npm install --save @ng-idle/core @ng-idle/keepalive angular2-moment
import ng-idle in app.module.ts
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';

imports: [
NgIdleKeepaliveModule,
IonicModule.forRoot(MyApp)  ],

declare idle in typescript file which you wanna use. e.g:home.ts

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive';
export class HomePage {

idleState = 'Not started.';
timedOut = false;
min:any;
sec;any;
constructor(public navCtrl: NavController,private barcodeScanner: BarcodeScanner,public idle: Idle) { }


 ionViewDidLoad() {
this.idle.setIdle(5);  //after 5 sec idle
this.idle.setTimeout(5*60);  //5min countdown
this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

this.idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');
this.idle.onTimeout.subscribe(() => {
  this.idleState = 'Timed out!';
  this.timedOut = true;
  this.navCtrl.pop();  //go to logout page after 5 min idle.
});
this.idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!');
this.idle.onTimeoutWarning.subscribe((countdown) => {


    var data=countdown/60;
    this.min=data.toString().split('.')[0];
    this.sec=     parseFloat(0+'.'+data.toString().split('.')[1])*60;
    this.sec=  (Math.round(this.sec * 100) / 100);
    console.log(countdown)

  this.idleState = 'You'll logout in ' + this.min+' min ' +this.sec+'  seconds!';
});
   this.reload();
  }
  reload() {
    this.idle.watch();
    this.idleState = 'Started.';
    this.timedOut = false;
  }
}

in home.html

 <p><strong>{{idleState}}</strong></p>
<button (click)="reset()" *ngIf="timedOut">Reload</button>

it'll work as count down till 5 min.