Angular (6.x+) directive to handle user inactivity
Using NPM:
npm install ngx-inactivity-detector --save
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) {
}
}
-
[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 ( can be used to detect the most recent instant when the user prevented the inactivity)
- Add callback "timeout" after 15 minutes of user's inactivity:
<div
[ngxInactivityDetector]="15"
(inactivityTimeout)="timeout()">
...
</div>