**ngcli-idle-timeout** is a simple library to show a model on idle timeout.
npm install ngcli-idle-timeoutngcli-idle-timeout is a simple library to show a model on idle timeout.
``bash`
npm install ngcli-idle-timeout
##app.module.ts:
`typescript`
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgcliIdleTimeoutModule, NgcliIdleTimeoutService } from 'ngcli-idle-timeout';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgcliIdleTimeoutModule
],
providers: [NgcliIdleTimeoutService],
bootstrap: [AppComponent]
})
export class AppModule { }
##app.component.html:
`html
`
##app.component.ts:
`typescript
import { Component } from '@angular/core';
import { NgcliIdleTimeoutService } from 'ngcli-idle-timeout';
import { DialogConfig } from 'ngcli-idle-timeout/lib/ngcli-idle-timeout.dialogconfig';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'ClientApp';
private dialogConfig =
{
DialogMessage: "",
TimeOutInSecs: 15,
DialogHeader: "",
ShowDialogInSecs: 10
};
constructor(private ngcliIdleTimeoutService: NgcliIdleTimeoutService) {
}
OnStayLoggedIn() {
alert('app component Hi');
}
OnTimerCompleted() {
alert('timer completed');
}
StartWatching() {
this.ngcliIdleTimeoutService.StartWatching(this.dialogConfig);
}
RestartTimer() {
this.ngcliIdleTimeoutService.RestartTimer(this.dialogConfig);
}
}
`
exposes both StartWatching(this.dialogConfig) and RestartTimer(this.dialogConfig) methods. Both methods do the same. You can use either one to trigger the timer. On any every API call you can call RestartTimeer() to reset the timer.NgcliIdleTimeoutService emits both OnStayLoggedIn() and OnTimerCompleted() methods.
the method will be fired on Stay LoggedIn click on the timeout modal. You can refresh your session or call the API to keep it active
the method will be fired on Timer Completed event. you can logout the user and redirect to login page again.