https://github.com/theideasaler/ngx-http-get-shell

ngx-http-get-shell is a lightweight angular component which encapsulate GETs and client-side cache solution.
https://github.com/theideasaler/ngx-http-get-shell

angular http-shell optimization rest-api software-engineering webdevelopment

Last synced: 3 days ago
JSON representation

ngx-http-get-shell is a lightweight angular component which encapsulate GETs and client-side cache solution.

• Host: GitHub
• URL: https://github.com/theideasaler/ngx-http-get-shell
• Owner: theideasaler
• Created: 2022-06-25T03:50:56.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-19T12:23:57.000Z (about 2 years ago)
• Last Synced: 2024-11-23T09:46:36.792Z (about 1 month ago)
• Topics: angular, http-shell, optimization, rest-api, software-engineering, webdevelopment
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/ngx-http-get-shell
• Size: 393 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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

  

    {{ data | json }}

  

  

    


      {{file | json}}

    

  


```

## 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 |