Package Exports

ng-imgcache

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 (ng-imgcache) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ng-imagecache

Angular 2+ / Ionic 2+ module to cache images for offline use.

Important Note: this module supports Angular / Ionic versions 2 and above only. For Angular 1.x / Ionic 1.x, consider angular-imgcache.js, which this module was inspired by.

Installation

npm install ng-imgcache

Usage

Ionic 2+

1. Install Cordova plugins:

cordova plugin add cordova-plugin-file cordova-plugin-file-transfer

2. Import the ImgCacheModule:

//app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { ImgCacheModule } from 'ng-imgcache';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ImgCacheModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

3. Initialise the cache in your AppComponent:

// app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { ImgCacheService } from 'ng-imgcache';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, imgCache: ImgCacheService) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      // Ensure you init once the platform is ready.
      imgCache.init({
        // Pass any options here...
      });
    });
  }
}

4. Use the directive in your component templates:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <img img-cache img-cache-src="http://placekitten.com/200/300">
    <div img-cache img-cache-bg-url="http://placekitten.com/200/300"></div>
  `,
  styles: [`
    div, img {
      height: 200px;
    }
  `]
})
export class AppComponent {};

That's it!

Angular 2+

TBC: a very similar process to above.

How it works

Image URLs that are specified in a img-cache-src or img-cache-bg-url attribute will be downloaded and cached for subsequent offline use by the included imgcache.js library.

Tip: make sure you use img-cache-src with <img> tags, as this will set the src attribute of the <img> tag to the cached image. For other elements, you can use the img-cache-bg-url attribute, which will set the background-image style of the element to point to the cached image.

License

MIT

Credits

Inspired by angular-imgcache.js, this module was rewritten to support Angular 2+ and Ionic 2+ projects. Uses the excellent imgcache.js library.