npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-imgcache-ionic

v1.2.2

Published

Angular 2+ module to cache images for offline use.

Downloads

3

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.