Idle timeout is one of the feature to enhance security by enforce logout if not used.

In Angular, idle timeout can be done by rxjs. This demo will show the steps on adding and enable this feature.

Prerequisites

1. Angular CLI should be install. If not, execute command below.

   npm -i @angular/cli -g

Steps

1. Create new service.
   In terminal, input command below to generate new service named IdleService.

   ng generate service Idle
   
   ## Or simply use short cut parameter.
   ng g s Idle

2. Alter Idle service code.
   Open idle-service.ts and alter code as below.

   import { Injectable } from '@angular/core';
   import { Observable, fromEvent, merge, Subject, timer, Subscription } from 'rxjs';
   
   @Injectable({
     providedIn: 'root'
   })
   
   export class IdleService {
     private idle: Observable<any> = new Observable();
     private timer :Subscription = new Subscription();
     private timeOutMilliSeconds: number = 1000;
     private idleSubscription: Subscription = new Subscription();
   
     public expired: Subject<boolean> = new Subject<boolean>();
   
     public startWatching(timeOutSeconds : number): Observable<any> {
       this.idle = merge(
         fromEvent(document, 'mousemove'),
         fromEvent(document, 'click'),
         fromEvent(document, 'mousedown'),
         fromEvent(document, 'keypress'),
         fromEvent(document, 'DOMMouseScroll'),
         fromEvent(document, 'mousewheel'),
         fromEvent(document, 'touchmove'),
         fromEvent(document, 'MSPointerMove'),
         fromEvent(window, 'mousemove'),
         fromEvent(window, 'resize'),
       );
   
       this.timeOutMilliSeconds = timeOutSeconds * 1000;
   
       this.idleSubscription = this.idle.subscribe((res) => {
         this.resetTimer();
       });
   
       this.startTimer();
   
       return this.expired;
     }
   
     private startTimer() {
      this.timer = timer(this.timeOutMilliSeconds, this.timeOutMilliSeconds).subscribe((res) => {
         this.expired.next(true);
       });
     }
   
     public resetTimer() {
       this.timer.unsubscribe();
       this.startTimer();
     }
   
     public stopTimer() {
       this.timer.unsubscribe();
       this.idleSubscription.unsubscribe();
     }
   }
   

3. Update environment settings.
   To make timeout configurable, suggest split it to environment file. Open environment.ts and alter code as below.
   This demo will set timeout after 5 minutes.

   export const environment = {
     idleTimeInMinutes: 5
   };

4. Enable idle service.
   In app-component.ts, alter code as below.

   export class AppComponent implements OnInit {
     constructor(private router: Router, private idleService: IdleService) {
   
     }
   
     ngOnInit(): void {
       this.initialIdleSettings();
     }
   
     private initialIdleSettings() {
       const idleTimeoutInSeconds: number = environment.idleTimeInMinutes * 60;
       this.idleService.startWatching(idleTimeoutInSeconds).subscribe((isTimeOut: boolean) => {
         if (isTimeOut) {
           alert("Session timeout. It will redirect to login page.");
         }
       });
     }
   }

5. Test to verify.
   Run application and wait for 5 minutes without action. If dialog prompted, it means code can executed successfully.
   

Related sample project has been update to GitHub repository.