ngforage

localforage bindings for Angular

---

• Demo
• API documentation

---

Installation

 npm install localforage@^1.5.0 ngforage@^2.0.0 # for Angular 5
 npm install localforage@^1.5.0 ngforage@^3.0.0 # for Angular 6
 npm install localforage@^1.5.0 ngforage@^4.0.0 # for Angular 7

Basic Usage

  import {NgForageModule, NgForageConfig, Driver} from 'ngforage';
  
  @NgModule({
    imports: [
      // Optional in Angular 6 and up
      NgForageModule.forRoot(),
      
      // Optional configuration as an alternative to what's below in Angular 6+
      NgForageModule.forRoot({
        name: 'MyApp',
        driver: [ // defaults to indexedDB -> webSQL -> localStorage
          Driver.INDEXED_DB,
          Driver.LOCAL_STORAGE
        ]
      })
    ]
  })
  export class AppModule{
    public constructor(ngfConfig: NgForageConfig) {
      ngfConfig.configure({
        name: 'MyApp',
        driver: [ // defaults to indexedDB -> webSQL -> localStorage
          Driver.INDEXED_DB,
          Driver.LOCAL_STORAGE
        ]
      });
    }
  }

  import {NgForage, Driver, NgForageCache, NgForageConfig, 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

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

import {NgModule} from "@angular/core";
import {NgForageConfig, NgForageModule} 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({
  imports: [
    NgForageModule
  ]
})
export class DemoModule {

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