ngx-endpoints


<center><image src="src/assets/images/ic_launcher.png"><h1>ngx-endpoints</h1></center>

load data from url-endpoints dynamically at runtime

- [Demo](#demo)
- [Installation](#installation)
- [Technical Documentation](#technical-documentation)
- [Usecase](#usecase)
- [Dependencies](#dependencies)
- [How to integrate into a component](#how-to-integrate-into-a-component)
  * [Attributes](#attributes)
  * [Example](#example)
    + [1. Import Module](#1-import-module)
    + [2. Import Classes](#2-import-classes)
    + [3. Inject NgxEndpointService and NgxEndPointDataProviderService](#3-inject-ngxendpointservice-and-ngxendpointdataproviderservice)
    + [4. Use it in code directly](#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](https://github.com/AdvancedClimateSystems/moment-relativism) |  false	| boolean |false
| convertDatesOutputFormat | [moment.js](https://momentjs.com/docs/#/displaying/format/) format will be used for conversion before url request will be started | - 	| string |false


### Example

```typescript
  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
```typescript
...
import { NgxEndpointsModule} from 'ngx-endpoints';
...


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

```

#### 2. Import Classes
```typescript
import {NgxEndPoint, NgxEndPointDataProviderService, NgxEndPointData, NgxEndpointService} from 'ngx-endpoints';
```

#### 3. Inject NgxEndpointService and NgxEndPointDataProviderService
```typescript
constructor(protected endpointservice: NgxEndpointService, protected endpointdataprovider: NgxEndPointDataProviderService) { }
```

#### 4. Use it in code directly

* Basic Example 

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