ngcli-idle-timeout

ngcli-idle-timeout is a simple library to show a model on idle timeout.

Getting Started

Installation:

npm install ngcli-idle-timeout

Getting Started With Default Configuration - NgModule

##app.module.ts:

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 { }

Getting Started with Default Configuration - Manual Component Inclusion

##app.component.html:

<ngcli-idle-timeout (OnStayLoggedIn_Click)="OnStayLoggedIn();" (OnTimerCompleted_Event)="OnTimerCompleted();"></ngcli-idle-timeout>

<button class="btn btn-primary" (click)="StartWatching();">Start Watching</button>

<button class="btn btn-success" (click)="RestartTimer();">Restart Timer</button>

##app.component.ts:

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 = <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);
  }
}

NgcliIdleTimeoutService Service

NgcliIdleTimeoutService 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. `

OnStayLoggedIn()

the method will be fired on Stay LoggedInclick on the timeout modal. You can refresh your session or call the API to keep it active

OnStayLoggedIn()

the method will be fired on Timer Completedevent. you can logout the user and redirect to login page again.

Author

Ravinder Seelam

Credits

Copyright

Licence