Press "Enter" to skip to content

User’s Idle Service for Angular 6 | angular-user-idle

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, and onTimeout() 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

    Leave a Reply

    Your email address will not be published. Required fields are marked *