ng2-idle-example
ng2-idle-example copied to clipboard
Example for ng2-idle
ng2-idle-example
Installing the example
You will need a recent version of NodeJs installed, as well as a Git client. First, clone the repository and change to the new directory:
git clone https://github.com/HackedByChinese/ng2-idle-example.git
cd ng2-idle-example
You will need to install angular-cli
by running the following command:
npm install -g angular-cli
Next, install the project's dependencies:
npm install
Now you can run ng serve
for to start a dev server, and navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Create your own demo
This example shows you how to create a project using TypeScript and angular-cli
, and includes the optional @ng-idle/keepalive
module. It also uses angular2-moment to provide additional pipes for formatting the last ping time.
Install TypeScript
You will get best results with TypeScript 2 or later. If you do not have this installed, run:
npm install -g [email protected]
Create a project with Angular CLI
In this example, we'll use angular-cli to create, test, and serve your application. If you do not have Angular CLI installed, run:
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli
Run the following commands to create your project:
ng new my-idle-app
cd my-idle-app
Install @ng-idle
@ng-idle
is available via NPM. Install it by running:
npm install --save @ng-idle/core @ng-idle/keepalive angular2-moment
Set up your application module
Open src/app/app.module.ts
and import NgIdleKeepaliveModule
using:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgIdleKeepaliveModule } from '@ng-idle/keepalive'; // this includes the core NgIdleModule but includes keepalive providers for easy wireup
import { MomentModule } from 'angular2-moment'; // optional, provides moment-style pipes for date formatting
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MomentModule,
NgIdleKeepaliveModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Omitting keepalive
Use import {NgIdleModule} from '@ng-idle/core'
instead of NgIdleKeepaliveModule
.
Extend your app component
Open src/app/app.component.ts
and add a constructor. This is where we will configure the Idle
service and start watching. By placing this code in the AppComponent constructor, the application will immediately start watching for idleness. This example also uses the default interrupt source by watching the document for common user input events. We also subscribe to various events to handle idle state. This is only an example; you can tailor your initialization and handling for your application's purposes.
import { Component } from '@angular/core';
import {Idle, DEFAULT_INTERRUPTSOURCES} from '@ng-idle/core';
import {Keepalive} from '@ng-idle/keepalive';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
idleState = 'Not started.';
timedOut = false;
lastPing?: Date = null;
constructor(private idle: Idle, private keepalive: Keepalive) {
// sets an idle timeout of 5 seconds, for testing purposes.
idle.setIdle(5);
// sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
idle.setTimeout(5);
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');
idle.onTimeout.subscribe(() => {
this.idleState = 'Timed out!';
this.timedOut = true;
});
idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!');
idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!');
// sets the ping interval to 15 seconds
keepalive.interval(15);
keepalive.onPing.subscribe(() => this.lastPing = new Date());
this.reset();
}
reset() {
this.idle.watch();
this.idleState = 'Started.';
this.timedOut = false;
}
}
We'll also add a simple status label and button to show the component is working, and to reset the demo if you time out. Open src/app/app.component.html
and add the following:
<p><strong>{{idleState}}</strong></p>
<p *ngIf="lastPing"><small>Last keepalive ping <strong>{{lastPing | amTimeAgo}}</strong></small></p>
<button (click)="reset()" *ngIf="timedOut">Restart</button>
Omitting keepalive
Simply eliminate the import for Keepalive
and all references, and omit the lastPing
field from your AppComponent
and view.
Run your project
Execute ng serve
to serve your project at http://localhost:4200