angular-user-idle service for Angular 6+ to detect and monitor user inactivity.

Service logic:

• The user is inactive for 10 minutes
• onTimerStart() is to fire and return a 5-minute countdown
• If the user does not stop the timer via stopTimer(), then the timer is over, and onTimeout() is fired.

Must Read: How to Detect User Inactivity Using Javascript | Idle Tracker

How to make use of it:

Installation:

npm install angular-user-idle

1. In app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { UserIdleModule } from 'angular-user-idle';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    
    // Optionally you can set time for `idle`, `timeout` and `ping` in seconds.
    // Default values: `idle` is 600 (10 minutes), `timeout` is 300 (5 minutes) 
    // and `ping` is 120 (2 minutes).
    UserIdleModule.forRoot({idle: 600, timeout: 300, ping: 120})
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. The user service must start idle in one of the core components or services of your application, for example, login.component.ts:

import { Component, OnInit } from '@angular/core';
import { UserIdleService } from 'angular-user-idle';

@Component({
  templateUrl: './login.component.jade'
})
export class LoginComponent implements OnInit {

  readonly googlePlayLink: string;
  readonly appStoreLink: string;

  constructor(private userIdle: UserIdleService) {
  }

  ngOnInit() {
    //Start watching for user inactivity.
    this.userIdle.startWatching();
    
    // Start watching when user idle is starting.
    this.userIdle.onTimerStart().subscribe(count => console.log(count));
    
    // Start watch when time is up.
    this.userIdle.onTimeout().subscribe(() => console.log('Time is up!'));
  }

  stop() {
    this.userIdle.stopTimer();
  }

  stopWatching() {
    this.userIdle.stopWatching();
  }

  startWatching() {
    this.userIdle.startWatching();
  }

  restart() {
    this.userIdle.resetTimer();
  }
}

API

startWatching(): void;

Start user idle service and configure it.

Must Read: Responding To Idle Users in Angular Applications | ng2-idle

onTimerStart(): Observable<number>

Fired when the timer is starting and returns observable (stream) of timer’s count.

onTimeout(): Observable<boolean>;

Fired when the time is out and the id user did not stop the timer.

stopTimer()

Stop timer.

resetTimer()

Reset the timer after onTimeout() has been fired.

stopWatching()

Stop user idle service.

setConfigValues({idle, timeout, ping})

Set config values after the module was initialized.

setCustomActivityEvents(customEvents: Observable<any>): void

Set custom activity events after the module was initialized.

Must Read: Simplest and Effective jQuery Idle (Inactivity) Plugin | jquery.inactivity

See Demo And Download

Official Website(rednez): Click Here

This superior jQuery/javascript plugin is developed by rednez. For extra advanced usage, please go to the official website.