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, andonTimeout()
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.