ngconf
Published in

ngconf

Detecting Idle Users in Your Angular App

tldr;

Detecting Idle Users

// app.module.ts
import { NgIdleKeepaliveModule } from ‘@ng-idle/keepalive’;
@NgModule({
imports: [ NgIdleKeepaliveModule.forRoot() ]
})
// app.component.ts
import { DEFAULT_INTERRUPTSOURCES } from ‘@ng-idle/core’;
export class AppComponent implements OnInit {
private numberOfSeconds: number = 5;
constructor(private _idle: Idle) {} ngOnInit() {
this._idle.setIdle(numberOfSeconds);
this._idle.setTimeout(numberOfSeconds);
this._idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
}
}
// app.component.tsngOnInit() {
this._idle.setIdle(numberOfSeconds);
this._idle.setTimeout(numberOfSeconds);
this._idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
this._idle.onIdleStart.subscribe(() => {
// show the modal
});
this._idle.onIdleEnd.subscribe(() => {
// hide the modal
});
this._idle.onTimeoutWarning.subscribe((secondsLeft: number) => {
// Update the warning message
});
this._idle.onTimeout.subscribe(() => {
// Hide the modal, log out, do something else
});
}
// app.component.tsngOnInit() {
. . .
this._idle.watch()
}
```

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store