# ngx-endpoints

> A library to dynamically load data from http endpoints / urls in angular

Latest version **1.1.5** (published 2018-11-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-endpoints
pnpm add ngx-endpoints
yarn add ngx-endpoints
bun add ngx-endpoints
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2018-11-24 |
| First published | 2018-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 426 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | florian.fuss |
| Keywords | Angular, Library, Endpoint, Dynamic, Url, Reporting, Charts |

## Links

- npm: https://www.npmjs.com/package/ngx-endpoints
- Repository: https://github.com/pharindoko/ngx-endpoints
- Homepage: https://github.com/pharindoko/ngx-endpoints#readme
- Issues: https://github.com/pharindoko/ngx-endpoints/issues
- npm.io page: https://npm.io/package/ngx-endpoints

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [moment](https://npm.io/package/moment.md) ^2.22.2
- [query-string](https://npm.io/package/query-string.md) ^6.2.0
- [moment-relativism](https://npm.io/package/moment-relativism.md) ^1.0.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2018-11-24
- 1.1.4 — 2018-11-24
- 1.1.3 — 2018-11-24
- 1.1.1 — 2018-11-18
- 1.1.0 — 2018-11-18
- 1.0.10 — 2018-11-18
- 1.0.9 — 2018-11-18
- 1.0.8 — 2018-11-18
- 1.0.7 — 2018-11-17
- 1.0.6 — 2018-11-17
- 1.0.5 — 2018-11-16
- 1.0.4 — 2018-11-16
- 1.0.2 — 2018-11-14
- 1.0.1 — 2018-11-14
- 1.0.0 — 2018-11-12

## README

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

---
_Source: https://npm.io/package/ngx-endpoints · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._