Angular 5, how to detect user inactivity

Question

Aside from using IdleJS and ngDoCheck(), how can we detect user inactivity in Angular 5?

Thanks

Answer 1

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.

Answer 2

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.

Answer 3

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();
   }