ng-imgcache-ionic
v1.2.2
Published
Angular 2+ module to cache images for offline use.
Downloads
1
Maintainers
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.