ngx-idle-timeout
v1.0.0
Published
A Self-contained, timeout that provides integrated countdown timer for angular applications
Downloads
253
Maintainers
Readme
NgxIdleTimeout
A Self-contained, timeout that provides integrated countdown timer for angular applications
Dependencies
- Angular 11+
Installation
To add idle-timeout to your Angular project:
npm i ngx-idle-timeout
Once installed, add the slider to your app.module.ts
:
import { NgxIdleTimeoutModule } from 'ngx-idle-timeout';
...
@NgModule({
...
imports: [
...
NgxIdleTimeoutModule,
...
],
...
})
export class AppModule {}
Sample usage
Now you can use the idle-timeout component in your app components, for example in app.component.ts
:
import { IdleService, IdleWarningStates } from 'node_modules/ngx-idle-timeout';
...
@Component({...})
export class AppComponent {
title = 'test-area';
idleTimer = true;
constructor(private _idleService: IdleService) { }
ngOnInit(): void {
this.timerSubscribe();
}
resubscribe(): void {
this.idleTimer = true;
this.timerSubscribe();
}
private timerSubscribe(): void {
this._idleService
.idleStateChanged()
.subscribe(
val => {
if (val === IdleWarningStates.SecondaryTimerExpired) {
this._idleService.stopTimer();
this.idleTimer = false;
}
}
);
}
}
And in template file app.component.html
:
<ngx-idle-timeout *ngIf="idleTimer"
[allowedIdleTimeInSeconds]="120"
[message]="'This is a test message'"
[warningTimeInSeconds]="10"></ngx-idle-timeout>
IdleWarningStates
In addition IdleWarningStates.SecondaryTimerExpired you can also watch for any of the following
PrimaryTimerStarted
PrimaryTimerExpired
SecondaryTimerStarted
SecondaryTimerExpired
SecondaryTimerCancelled
Default values
All ngx-idle-timeout parameters are optional. When no value is provided then the default values will be used:
allowedIdleTimeInSeconds = 60;
warningTimeInSeconds = 10;
message = '';
Known Issues
Before reporting a new bug, please look at KNOWN_ISSUES.md for a list of known problems and their workarounds. New bugs reports for these problems will not be accepted.
Bugs
You can report any bugs as Github issues.
Please describe the issue in detail pasting any relevant code, or preferrably a StackBlitz with reproduction of the problem. Please also provide the version of NPM package you are using.
Changelog
For list of changes and bugfixes, see CHANGELOG.md.