ngx-inactivity-detector
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

ngx-inactivity-detector

Angular (6.x+) directive to handle user inactivity

Installation

Using NPM:

npm install ngx-inactivity-detector --save

Requirements

Usage

In your app.module file:

import { NgxInactivityDetectorModule } from 'ngx-inactivity-detector';
 
@NgModule({
  ...
  imports[
    NgxInactivityDetectorModule
  ]
  ...
})

In your app.component.html file:

<div  [ngxInactivityDetector]="10" (inactivityTimeout)="timeout()" (timerReset)="reset($event)">

In your app.component.ts file

export class AppComponent {
 
  /**
   * Handle inactivity callback
   */
  public timeout() {
    // handle user inactivity
  }
 
  /**
   * interface ITimerReset {
      resetEvent: Event; // DOM event which resetted the timer
      interval: number; // interval at which the timer is resetted
    }
   */
  public reset(event: ITimerReset) {
 
  }
}

Options

  • [ngxInactivityDetector] - inactivity timeout in minutes (10 minutes by defualt)

  • [debounceTime] - delay between each reset event in milliseconds (1000 by default)

  • [resetEvents] - list of events which triggers reset timeout (['mousedown', 'mousemove', 'touchend', 'touchmove','wheel', 'keypress' ] by default)

  • (inactivityTimeout) - event emitter to handle inactivity callback

  • (timerReset) - event emitter whenever the inactivity timer resets

Examples

  • Add callback "timeout" after 15 minutes of user's inactivity:
<div
  [ngxInactivityDetector]="15"
  (inactivityTimeout)="timeout()">
  ...
</div>

Package Sidebar

Install

npm i ngx-inactivity-detector

Weekly Downloads

30

Version

1.1.1

License

MIT

Unpacked Size

159 kB

Total Files

24

Last publish

Collaborators

  • rohits130198