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

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.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…

Leave a Reply

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