angular-user-idle service for Angular 6+ to detect and monitor user inactivity.
angular user idle for angular, angular user idle npm, angular user idle tutorial, angular user idle angular 12, angular user idle not working, ng idle
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.
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.
onTimerStart(): Observable<number>
Fired when the timer is starting and return observable (stream) of timer’s count.
onTimeout(): Observable<boolean>;
Fired when time is out and the id user did not stop the timer.
stopTimer()
Stop timer.
resetTimer()
Reset 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.
Userβs Idle Service For Angular, angular-user-idle Plugin/Github
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.
Be First to Comment