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