Angular 5 / Angular 6 User Idle session tracking

Hi Folks !

One of the feature that I implemented on UI side is to find out the user idle time, if user becomes idle for say ‘x’ minutes then take an action e.g. to invalidate the user session, force to sign in again to application after certain amount of inactivity time.

To achieve this we can use library named angular-user-idle

First install the dependency in your angular project by executing following command-

npm i angular-user-idle@^1.1.0

Now next step is to import same in app.module.ts

import { UserIdleModule } from ‘angular-user-idle’;

and declare it as follows:

UserIdleModule.forRoot({idle:600, timeout:300, ping:60}),

where all values are defined in milliseconds, so in above example we set idle time to 10 mins, timeout to 5 mins and ping to 1 min.

app.module.js looks like as follows:

import { BrowserModule } from ‘@angular/platform-browser’;
import { UserIdleModule } from ‘angular-user-idle’;
import { NgModule } from ‘@angular/core’;
import { RouterModule } from ‘@angular/router’;
import { FormsModule } from ‘@angular/forms’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { HttpModule } from ‘@angular/http’;
import { NgIf } from ‘@angular/common’;
import { ReactiveFormsModule } from ‘@angular/forms’;
import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
import { AppComponent } from ‘./app.component’;
declarations: [
imports: [
UserIdleModule.forRoot({idle:60, timeout:90, ping:30}),
providers: [],
bootstrap: [AppComponent]
export class AppModule { }

and write down following logic in method onInit of app.component.ts. Here after time out I’m displaying message pop-up to user saying their session has timeout.

import { Component } from ‘@angular/core’;
import {environment} from ‘../environments/environment’;
import {Http} from ‘@angular/http’;
/* For UI loader */
import { Subscription } from ‘rxjs’;
/* For Handling session timeout */
import { UserIdleService } from ‘angular-user-idle’;
styleUrls: [‘./app.component.css’]
export class AppComponent {
ngOnInit() {
//Start watching for user inactivity.
// Start watching when user idle is starting and reset if user action is there.
this.userIdle.onTimerStart().subscribe(count=> {
var eventList= [“click”, “mouseover”,”keydown”,”DOMMouseScroll”,”mousewheel”,
for(leteventofeventList) {
document.body.addEventListener(event, () =>this.userIdle.resetTimer());
// Start watch when time is up.
this.userIdle.onTimeout().subscribe(() => {
alert(“Your session has expired click on OK to resume the application.”);
Here we have import UserIdleService and then injected same in constructor. In eventlist we registered the list of events which interrupts the idle time and reset the idle counter. Rest of the code is self explanatory.
Done. Happy Coding !!!

4 thoughts on “Angular 5 / Angular 6 User Idle session tracking

  1. Thank you for this. Very helpful. Any thoughts on how I could implement a warning prior to timeout, such as “You will be logged out in 3 minutes due to inactivity. Click OK to continue your session.”


  2. this.userIdle.startWatching();

    This line it is giving error says Property ‘userIdle’ does not exist on type ‘AppComponent’


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s