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:

  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.

<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