@supphawit-j/ngx-speed-test

NgxSpeedTest v1.1

Library for check internet speed test, this library using speedof.me API for development. This library base on Angular Material

See more: npm GitHub

Install

npm i @supphawit-j/ngx-speed-test

API reference

NgxSpeedTestModule

In order to use this library, you need to import NgxSpeedTestModule to your module.

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgxSpeedTestModule} from "ngx-speed-test";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NgxSpeedTestModule.forRoot({domainName: 'localhost', apiKey: 'SOMxxxxxxxxxxx'})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

See more: SpeedOf.Me API Documentation

NgxSpeedtestConfig

This is a list of configuration for setting the library.

export interface NgxSpeedtestConfig {
  domainName: string;
  apiKey: string;
  config?: {
    sustainTime?: number,
    testServerEnabled?: boolean,
    userInfoEnabled?: boolean
    latencyTestEnabled?: boolean,
    uploadTestEnabled?: boolean,
    progress?: { enabled?: boolean, verbose?: boolean },
  };
}

Default:

apiConfig = {
  domainName: '',
  apiKey: '',
  config: {
    latencyTestEnabled: true,
    maxTestPass: 4,
    progress: {
      enabled: true,
      verbose: true
    },
    sustainTime: 4,
    testServerEnabled: true,
    uploadTestEnabled: true,
    userInfoEnabled: true
  },
  showBtn: true,
  showUI: true,
  autoStart: false,
  available: -1
}

NgxSpeedtestProgress

This is an object you will get while the API is in progress.

export interface NgxSpeedtestProgress {
  type: "download" | "upload" | "latency";
  pass: number;
  percentDone: number;
  currentSpeed: number;
  maxSpeed: number;
}

NgxSpeedtestResult

This is an object you will get while the API has done.

export interface NgxSpeedtestResult {
  hostname: string;
  ip_address: string;
  latency: number;
  download: number;
  maxDownload: number;
  upload: number;
  maxUpload: number;
  jitter: number;
  testDate: string;
  testServer: string;
  userAgent: string;
}

SpeedTestComponent

selector: <ngx-speed-test>

Additional properties

Name	Description
@Input() showBtn: boolean	button display setup, true by default
@Input() showUI: boolean	UI display setup, false by default
@Input() available: boolean	test attempt , -1 ( equal to unlimited test attempt ) by default
@Input() autoStart: boolean	automatically start internet speed test, false by default
@Input() start: boolean	API trigger, false by default
@Output() started: boolean	return true when API is executed
@Output() progressing: NgxSpeedtestProgress	return NgxSpeedtestProgress object when speed test is running
@Output() completed: NgxSpeedtestResult	return NgxSpeedtestResult object when speed test has done

Usage

Import NgxSpeedTestModule and setup API configuration

app.module.ts

// other imports
import {NgxSpeedTestModule} from "ngx-speed-test";
import {config} from "rxjs";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // other imports
    NgxSpeedTestModule.forRoot('configuration: NgxSpeedtestConfig')
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Note: domainName and apiKey are required. If you don't set other property except domainName and apiKey, then default configuration will be apply.

Example

app.module.ts

// other imports
import {NgxSpeedTestModule} from "ngx-speed-test";
import {config} from "rxjs";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // other imports
    NgxSpeedTestModule.forRoot({domainName: 'localhost', apiKey: 'SOMxxxxxxxxxxx'})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.html

<ngx-speedtest-api-config [config]="apiConfig"></ngx-speedtest-api-config>

Logging data

• Add started output decorator, if you want to know when speed test has started.

• Add progressing output decorator, if you want to get progress of speed test.

• Add completed output decorator, if you want to get result of speed test.

app.component.ts

import {NgxSpeedtestResult, NgxSpeedtestProgress} from "ngx-speed-test";

export class AppCompomemt implements Oninit {
    
  ngOnInit() {
  }

  started(out: boolean) {
    console.log(out);
  }

  logProgress(out: NgxSpeedtestProgress) {
    console.log(out);
  }

  logResult(out: NgxSpeedtestResult) {
    console.log(out);
  }

}

app.component.html

<ngx-speedtest-api-config
  [config]="apiConfig"
  (started)="started($event)"
  (progressing)="logProgress($event)"
  (completed)="logResult($event)">
</ngx-speedtest-api-config>

UI Management

NgxSpeedTest has build in UI component.

• Add showBtn input decorator with value false, if you want to hide button.

• Add showUI input decorator with value false , if you want to hide UI of ngx-speed-test.

Apply Limit

• Add available input decorator with positive integer , if you want to set internet speed test attempt.

Note: If you don't set limitation, then API will use default value which is allowed user to run test as much as possible.

Automatic Run Speed Test

• Add autoStart input decorator with value true , if you want to automatically start internet speed test.

Note: This won't reduce the times that you can run speed test if you've set the limit.

Programmatically & Manually Run Speed Test

• Add start input decorator with value true , if you want to start internet speed test.

Note: You can only apply boolean value or function that return boolean as a value to this input decorator. And default value is false

app.component.ts

export class AppCompomemt implements Oninit {

  apiConfig: NgxSpeedtestConfig;
  go: boolean = false;

  ngOnInit() {
  }
  
}

app.component.html

<ngx-speedtest-api-config [config]="apiConfig" [start]="go"></ngx-speedtest-api-config>
<button type="button" (click)="go = !go" mat-raised-button color="primary">go</button>

About me

GitHub

@Supphawit-J

npm

@ideajeng

Credit

speedof.me