Ngcli-idle-timeout NPM

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