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 6
Installation
npm install ngforage@^2.0.0 # for Angular 5
npm install ngforage@^3.0.0 # for Angular 6Basic Usage
import {NgForageModule, NgForageConfig} from 'ngforage';
@NgModule({
imports: [
NgForageModule.forRoot()
]
})
export class AppModule{
public constructor(ngfConfig: NgForageConfig) {
ngfConfig.configure({
name: 'MyApp',
driver: [ // defaults to indexedDB -> webSQL -> localStorage -> sessionStorage
NgForageConfig.DRIVER_INDEXEDDB,
NgForageConfig.DRIVER_LOCALSTORAGE
]
});
}
} import {NgForage, 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 = NgForageConfig.DRIVER_SESSIONSTORAGE;
}
}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, 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);
}
}