Implementing Idle Timeout in Angular

Let's Learn how to use idle-timeout to improve performance and security in your Angular app !!

What is Idle Timeout Idle?

Timeout is the amount of time on the web application the user or client remains inactive. This is the time when the user is not doing anything on or off the computer on the app. Before logging out the user, it is typical for high-risk web apps to have 2–5 minutes idle time and low-risk web apps to have 15–30 minutes idle time.

Why do we need it?

For two reasons, Timeout is mostly needed in web apps: security and avoiding unnecessary API calls. The web app is vulnerable to attacks on security. The longer it's idle, the longer the attacker will have time to inject some malicious code or hijack the session.

In another case, imagine a scenario where the updated data is to be retrieved with calls to the backend API every 30 sec or 60 sec. If the user is away from the computer, there is no need to make those calls. With the idle timeout function, we can avoid these unnecessary calls.

so let's get into it using @ng-idle library.

Assuming you already have a angular CLI project , If not then please check my other angular CLI installation guide artical from home page.

@ng-idle is available via NPM. Install it by running:

npm install --save @ng-idle/core @ng-idle/keepalive angular2-moment 

Set up your application module

Open src/app/app.module.ts and import the Ng2IdleModule using below code:

import { NgIdleKeepaliveModule } from '@ng-idle/keepalive'; // this includes the core NgIdleModule but includes keepalive providers for easy wireup

import { MomentModule } from 'angular2-moment'; // optional, provides moment-style pipes for date formatting

 imports: [

Extend this to your app component :

Open src / app / app.component.ts and add a constructor. This is where we configure and start watching the Idle device. The application must immediately start watching for idleness by placing this code in the AppComponent constructor. Through monitoring the report for common user input events, this example often uses the standard interrupt origin. In order to handle idle state, we also subscribe to various events. This is just an example; for the purposes of your application, you can tailor your initialization and handling.

import {Idle, DEFAULT_INTERRUPTSOURCES} from '@ng-idle/core';
import {Keepalive} from '@ng-idle/keepalive';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  idleState = 'Not started.';
  timedOut = false;
  lastPing?: Date = null;

  constructor(private idle: Idle, private keepalive: Keepalive) {
    // sets an idle timeout of 5 seconds, for testing purposes.
    // sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
    // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document

    idle.onIdleEnd.subscribe(() => this.idleState = 'i am no longer idle.');
    idle.onTimeout.subscribe(() => {
      this.idleState = 'Timed out!';
      this.timedOut = true;
    idle.onIdleStart.subscribe(() => this.idleState = 'You have gone idle!');
    idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!');

    // sets the ping interval to 15 seconds

    keepalive.onPing.subscribe(() => this.lastPing = new Date());


  reset() {;
    this.idleState = 'Started.';
    this.timedOut = false;

We'll also add a simple status label and button to show the work of the component and reset the demo if you're out of time.

Open src / app / app.component.html and paste the below code:

<p *ngIf="lastPing"><small>Last keepalive ping <strong>{{lastPing | amTimeAgo}}</strong></small></p>
<button (click)="reset()" *ngIf="timedOut">Restart</button>

Now godhead and fire ng serve , and keep you system idle for 5 sec , hopefully you will get timeout notification as below.

Never Miss a Post. Subscribe Now!

Contact Us:

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad