# ngx-http-get-shell

> A lightweight Angular GET shell component to help reduce creating repetitive code of HttpClient GET APIs. This component has built-in support for **client-side cache** storage supported by IndexedDB.

Latest version **0.0.4** (published 2022-12-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-http-get-shell
pnpm add ngx-http-get-shell
yarn add ngx-http-get-shell
bun add ngx-http-get-shell
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2022-12-19 |
| First published | 2022-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 85.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Neo Liu |
| Maintainers | neoliu |
| Keywords | angular, javascript, http, shell |

## Links

- npm: https://www.npmjs.com/package/ngx-http-get-shell
- Repository: https://github.com/theideasaler/ngx-http-get-shell
- Homepage: https://github.com/theideasaler/ngx-http-get-shell#readme
- Issues: https://github.com/theideasaler/ngx-http-get-shell/issues
- npm.io page: https://npm.io/package/ngx-http-get-shell

## Dependencies (2)

- [idb](https://npm.io/package/idb.md) ^7.0.2
- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.0.4 (latest) — 2022-12-19
- 0.0.3 — 2022-12-19
- 0.0.2 — 2022-06-25
- 0.0.1 — 2022-06-25

## README

# ngx-http-get-shell

A lightweight Angular GET shell component to help reduce creating repetitive code of HttpClient GET APIs. This component has built-in support for **client-side cache** storage supported by IndexedDB.

## Installation

Install the npm package.
```
  npm i ngx-http-get-shell
```
Import it into your root AppModule:
```ts
  import { NgxHttpGetShellModule } from 'ngx-http-get-shell';

@NgModule({
  imports: [
    ...
    NgxHttpGetShellModule.forRoot(),
    ...
  ],
})
export class AppModule { }
```

## Usage
This library is super easy-to-use, all you need is to pass the `url` you want to get data from into `ngx-http-get-shell`, The url could be **absolute HTTP URL** or a **relative url** of your static files.

```html
<ngx-http-get-shell url="https://api.github.com/users/theideasaler" [maxStale]="1000" [templateRef]="githubTmpl">
  <ng-template #githubTmpl let-data>
    {{ data | json }}
  </ng-template>
</ngx-http-get-shell>

<ngx-http-get-shell url="/assets/test.json" [maxStale]="3000" [templateRef]="staticTmpl">
  <ng-template #staticTmpl let-file>
    <div class="some wrapper elements">
      {{file | json}}
    </div>
  </ng-template>
</ngx-http-get-shell>
```


## NgxHttpGetShellComponent
`NgxHttpGetShellComponent` exposes some I/O for custom configuration.

| I/O | name | type | description |
|------|------|---------|-------------|
| @Input | url | string |  The URL to fetch data from. It will be used as the key from the cache. |
| @Input | maxStale | number | Max Stale duration in milliseconds, default is 0, which means no cache. |
| @Input | templateRef | TemplateRef | The template reference will be used to take the fetched and processed data. |
| @Input | dataProcessor | Function | The processor for the fetched data before it is emitted. |
| @Input | errorHandler | Function | The error handler for the data fetching. |
| @Output | dataLoaded | EventEmitter | Emitted when the data is loaded and processed. You can use this for your custom data handling. |

## IndexedDbService
This library also exposes `IndexedDbService` for you so that you can have more control of the indexedDB for your caching.

| method | type | description |
|------|---------|-------------|
| cleanup | static | Cleans up the database by removing expired items. This method will be called when `NgxHttpGetShellModule` is initialized. |
| setItem | instance | Adds an item to the database. |
| getItem | instance | Gets an item from the database |
| removeItem | instance | Deletes an item from the database |
| clearAll | instance | Clear all items from the database |
| getDb | instance | The the indexed db instance used by this service |

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