Angular 5, how to detect user inactivity

You could try with this :

export class AppComponent {

  userActivity;
  userInactive: Subject<any> = new Subject();

  constructor() {
    this.setTimeout();
    this.userInactive.subscribe(() => console.log('user has been inactive for 3s'));
  }

  setTimeout() {
    this.userActivity = setTimeout(() => this.userInactive.next(undefined), 3000);
  }

  @HostListener('window:mousemove') refreshUserState() {
    clearTimeout(this.userActivity);
    this.setTimeout();
  }
}

Seems to work in this stackblitz : open the console, don't move your mouse for 3 seconds : you see the message.

Refresh the page, move your mouse on the preview (right side) for a couple of seconds : the message doesn't pop until you stop for 3s.

You can obviously export that into a service, because as you can see, I'm using only a class to do that.

Service that solves this problem (instead of a component as the accepted answer), handles touch, type and mouse. Emits an event N seconds after the user has been idle, and when he 'wakes up'. Works on Angular 11:

import { Injectable } from "@angular/core";
import { fromEvent, Subject } from "rxjs";

@Injectable({
    providedIn: 'root',
})
export class IdleService {

  public idle$: Subject<boolean> = new Subject();
  public wake$: Subject<boolean> = new Subject();

  isIdle = false;
  private idleAfterSeconds = 10;
  private countDown;

  constructor() {
    // Setup events
    fromEvent(document, 'mousemove').subscribe(() => this.onInteraction());
    fromEvent(document, 'touchstart').subscribe(() => this.onInteraction());
    fromEvent(document, 'keydown').subscribe(() => this.onInteraction());
  }

  onInteraction() {
    // Is idle and interacting, emit Wake
    if (this.isIdle) {
      this.isIdle = false;
      this.wake$.next(true);
    }

    // User interaction, reset start-idle-timer
    clearTimeout(this.countDown);
    this.countDown = setTimeout(() => {
      // Countdown done without interaction - emit Idle
      this.isIdle = true;
      this.idle$.next(true);
    }, this.idleAfterSeconds * 1_000)
  }
}

Usage, inject in constructor and use:

constructor(private idleService: IdleService) {  
  idleService.idle$.subscribe(s => console.log('im idle, zzz'));
  idleService.wake$.subscribe(s => console.log('im awake!'));
}

A possible solution is to use this package angular-user-idle

I have not used it in real application but might be slightly more robust than the solution proposed in the previous answer.

This solution worked fine for me. the problem I faced with the accepted answer is, it only focuses on mouse events and no keyboard keypress events

    userActivity;
    userInactive: Subject<any> = new Subject();

    constructor( ) {
        
        this.setTimeout();
        this.userInactive.subscribe(() => {
        this.router.navigate(['/auth/lock']);
        });
       
        }

• These events check if user is idle for a specific time and then subscribe to a different ( lock ) screen

   keyPress(event: KeyboardEvent): void {
       clearTimeout(this.userActivity);
       this.setTimeout();
   }
   setTimeout(): void {
       this.userActivity = setTimeout(() => this.userInactive.next(undefined), 900000);
   }
  
   @HostListener('window:mousemove') refreshUserState() {
       clearTimeout(this.userActivity);
       this.setTimeout();
   }