Package Exports

ngforage

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngforage) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ngforage

localforage bindings for Angular

Installation

You can also npm install manually:

 npm install localforage@^1.10.0 ngforage@^11.0.0 # Angular 17
 npm install localforage@^1.10.0 ngforage@^10.0.0 # Angular 16
 npm install localforage@^1.10.0 ngforage@^9.0.0 # Angular 15
 npm install localforage@^1.10.0 ngforage@^8.0.0 # Angular 14
 npm install localforage@^1.9.0 ngforage@^7.0.0 # Angular 13
 npm install localforage@^1.5.0 ngforage@^6.0.0 # Angular 9
 npm install localforage@^1.5.0 ngforage@^5.0.0 # Angular 8
 npm install localforage@^1.5.0 ngforage@^4.0.0 # Angular 7
 npm install localforage@^1.5.0 ngforage@^3.0.0 # Angular 6
 npm install localforage@^1.5.0 ngforage@^2.0.0 # Angular 5

Basic Usage

  import {DEFAULT_CONFIG, NgForageOptions, NgForageConfig, Driver} from 'ngforage';
  
  @NgModule({
    providers: [
      // One way of configuring ngForage
      {
        provide: DEFAULT_CONFIG,
        useValue: {
          name: 'MyApp',
          driver: [ // defaults to indexedDB -> webSQL -> localStorage
            Driver.INDEXED_DB,
            Driver.LOCAL_STORAGE
          ]
        } as NgForageOptions
      }
    ]
  })
  export class AppModule{
    // An alternative way of configuring ngforage
    public constructor(ngfConfig: NgForageConfig) {
      ngfConfig.configure({
        name: 'MyApp',
        driver: [ // defaults to indexedDB -> webSQL -> localStorage
          Driver.INDEXED_DB,
          Driver.LOCAL_STORAGE
        ]
      });
    }
  }

  import {NgForage, Driver, NgForageCache, CachedItem} from 'ngforage';

  @Component({
    /* If you plan on making per-component config adjustments, add the services to the component's providers
     * to receive fresh instances; otherwise, skip the providers section.
     */
    providers: [NgForage, NgForageCache]
  })
  class SomeComponent implements OnInit {
    constructor(private readonly ngf: NgForage, private readonly cache: NgForageCache) {}
    
    public getItem<T = any>(key: string): Promise<T> {
      return this.ngf.getItem<T>(key);
    }
    
    public getCachedItem<T = any>(key: string): Promise<T | null> {
      return this.cache.getCached<T>(key)
        .then((r: CachedItem<T>) => {
          if (!r.hasData || r.expired) {
            return null;
          }
          
          return r.data;
        })
    }
    
    public ngOnInit() {
      this.ngf.name = 'SomeStore';
      this.cache.driver = Driver.LOCAL_STORAGE;
    }
  }

Store instances

It is recommended to declare NgForage and/or NgForageCache in providers if you're not using the default configuration. The running configuration hash is used to create and reuse drivers (e.g. different IndexedDB databases), therefore setting it on a shared instance might have unintended side-effects.

Defining a Driver

Define a driver as described in the localForage docs
Plug it in, either directly through localForage or through NgForageConfig:

import {NgModule} from "@angular/core";
import {NgForageConfig} from 'ngforage';
import localForage from 'localforage';

// Your driver definition
const myDriver: LocalForageDriver = {/*...*/};

// Define it through localForage
localForage.defineDriver(myDriver)
  .then(() => console.log('Defined!'))
  .catch(console.error);

@NgModule({})
export class AppModule {

  constructor(conf: NgForageConfig) {
    // Or through NgForageConfig
    conf.defineDriver(myDriver)
      .then(() => console.log('Defined!'))
      .catch(console.error);
  }
}