A Self-contained, timeout that provides integrated countdown timer for angular applications
npm install ngx-idle-timeoutA Self-contained, timeout that provides integrated countdown timer for angular applications
* Angular 11+
To add idle-timeout to your Angular project:
``
npm i ngx-idle-timeout
Once installed, add the slider to your app.module.ts:`typescript
import { NgxIdleTimeoutModule } from 'ngx-idle-timeout';
...
@NgModule({
...
imports: [
...
NgxIdleTimeoutModule,
...
],
...
})
export class AppModule {}
`
Now you can use the idle-timeout component in your app components, for example in app.component.ts:`typescript
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:`html`
[message]="'This is a test message'"
[warningTimeInSeconds]="10">
In addition IdleWarningStates.SecondaryTimerExpired you can also watch for any of the following
`enums`
PrimaryTimerStarted
PrimaryTimerExpired
SecondaryTimerStarted
SecondaryTimerExpired
SecondaryTimerCancelled
All ngx-idle-timeout parameters are optional. When no value is provided then the default values will be used:
`
allowedIdleTimeInSeconds = 60;
warningTimeInSeconds = 10;
message = '';
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.
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.
For list of changes and bugfixes, see CHANGELOG.md.