ngx-endpoints

ngx-endpoints

load data from url-endpoints dynamically at runtime

• Demo
• Installation
• Technical Documentation
• Usecase
• Dependencies
• How to integrate into a component
  • Attributes
  • Example
    • 1. Import Module
    • 2. Import Classes
    • 3. Inject NgxEndpointService and NgxEndPointDataProviderService
    • 4. Use it in code directly

Demo

https://pharindoko.github.io/ngx-endpoints/sample

Installation

NPM

npm install ngx-endpoints --save

YARN

yarn add ngx-endpoints

Technical Documentation

https://pharindoko.github.io/ngx-endpoints/documentation

Usecase

The assumption is always that you want to GET data.

• You need to execute url endpoints dynamically in the application.
• You retrieve urls from a backend and request further data from different urls based on different related objects
• You want to make date relative requests
• You want to make live requests and subscribe to it

Dependencies

Makes use of following packages:

• moment.js
• moment-relativism
• query-string

How to integrate into a component

Create an Array of Type NgxEndPoint (Array<NgxEndPointData>)

Attributes

Attribute	Description	Default Value	Type	Mandatory
title	title of the url endpoint you request	""	string	true
endPointId	id for later identification (matching)	0	number	true
active	enable or disable endpoint	true	boolean	false
endPointUrl	the url endpoint which will be requested	""	string	true
requestOptions	add header key/values	{}	object	false
live	Does the url endpoint deliver live data	false	boolean	false
liveinterval	In which timeinterval (milliseconds) the data should be requested	3000	number	false
convertDates	Use relative date expressions in endPointUrl for e.g. for grafana/prometheus - moment-relativism	false	boolean	false
convertDatesOutputFormat	moment.js format will be used for conversion before url request will be started	-	string	false

Example

  endPointArray: Array<NgxEndPointData> = [
{
  'title': 'Deutsche Bahn Public Transport API - Jungfernheid',
  'endPointId': 1,
  'active': true,
  'endPointUrl': 'https://2.db.transport.rest/stations?query=jungfernheide',
  'requestOptions': {
    'Content-Type': 'application/json',
  },
  'live': false
},
{
  'title': 'search-meinfernbus-locations - Frankfurt',
  'endPointId': 2,
  'active': true,
  'endPointUrl': 'https://1.flixbus.transport.rest/regions/?query=Frankfurt',
  'requestOptions': {
    'Content-Type': 'application/json',
  },
  'live': true,
  'liveinterval': 10000
}];

1. Import Module

...
import { NgxEndpointsModule} from 'ngx-endpoints';
...


@NgModule({
  declarations: [
  ],
  imports: [
    ...
    NgxEndpointsModule,
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }

2. Import Classes

import {NgxEndPoint, NgxEndPointDataProviderService, NgxEndPointData, NgxEndpointService} from 'ngx-endpoints';

3. Inject NgxEndpointService and NgxEndPointDataProviderService

constructor(protected endpointservice: NgxEndpointService, protected endpointdataprovider: NgxEndPointDataProviderService) { }

4. Use it in code directly

• Basic Example

ngOnInit(): void {
  // add to dataprovider service (Endpoints get created)
  for (const dataitem of this.endPointArray) {
    this.endpointdataprovider.addEndPoint(dataitem).requestData();
  }
  // subscribe to specific endpoint
  this.endpointdataprovider.endpoints.find(x => x.endpoint.endPointId === 2).data.subscribe(val => {
    console.log('Value: ' + val);
  });
}