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:


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';

  imports: [
    // 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';

  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.
    // 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() {

  stopWatching() {

  startWatching() {

  restart() {


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.


Stop timer.


Reset the timer after onTimeout() has been fired.


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 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…


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 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…


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…


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…


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 *