ℹ️ Please note that this package has reached its end. After getting into the React world 2018, I lost the contact into the Angular Ecosystem. With Ionic 6, Slider.js will also be split off, which will probably make this package incompatible for now. Unfortunately I don't have the time to develop this package further according to the demands - thank you for your trust and responses, I appreciated it very much. Feel free to fork this package and work on a successor. You will find here a good tutorial how to create your own image viewer, which is based on the same approach: https://www.youtube.com/watch?v=VCUpRkRi00w

ngx-ionic-image-viewer

An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.

Demo

Live Demo | Stackblitz

Overview

• Prerequisites
• Installation
• Usage
  • Import
  • Component
  • Directive
  • Controller
• Properties
• Workspace
  • Local Development
  • Code scaffolding
  • Build
  • Release & Publishing
  • Manual Publishing
  • Running unit tests
  • Running end-to-end tests
  • Further help
    • Committing
• Author
• Contributing
• Show your support
• License

Prerequisites

• ionic >= 4.0.0
• angular >= 8.0.0

Installation

npm install --save ngx-ionic-image-viewer

Usage

Import

Import the module and add it to your imports section in your main AppModule:

import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';

...

@NgModule({
  imports: [
    NgxIonicImageViewerModule
  ],
})
export class AppModule {}

Import the module and add it to your imports section of your component where you want to use it (e.g. home.module.ts):

import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';

...

@NgModule({
  imports: [
    NgxIonicImageViewerModule
  ],
})
export class HomePageModule {}

Component

Add ion-img-viewer within the HTML of your module (e.g. home.page.html)

<ion-img-viewer
  title="Demo"
  text="Component"
  scheme="dark"
  src="./assets/img/demo.jpg"
>
</ion-img-viewer>

Directive

Add ionImgViewer as a directive within the ion-img HTML element of your module (e.g. home.page.html)

<ion-img
  ionImgViewer
  title="Demo"
  text="Directive"
  scheme="light"
  src="./assets/img/demo.jpg"
>
</ion-img>

Controller

Import ViewerModalComponent from ngx-ionic-image-viewer and add it to the ModalController. Within the componentProps, all available properties can be passed, whereby src is always required. In addition you must add the css class ion-img-viewer to the property cssClass. Use cssClass: ['ion-img-viewer', 'my-custom-ion-img-viewer']in case you want to add more css classes.

import { ModalController } from '@ionic/angular';
import { ViewerModalComponent } from 'ngx-ionic-image-viewer';

export class HomePage {

  constructor(public modalController: ModalController) {}

  async openViewer() {
    const modal = await this.modalController.create({
      component: ViewerModalComponent,
      componentProps: {
        src: "./assets/img/demo.jpg"
      },
      cssClass: 'ion-img-viewer',
      keyboardClose: true,
      showBackdrop: true
    });

    return await modal.present();
  }
}

<ion-button (click)="openViewer()">Open Viewer</ion-button>

Properties

Workspace

This project was generated with Angular CLI version 8.3.14.

Local Development

1. Run the command to start the build every time a file change:

   npm run build:watch

2. Run the command to create a local symlink and start a local dev server fo app dev/testing.

   npm run ionic:serve

   • npm link: Create a local symlink that can then be used in the project where you want to integrate the package as you don’t want to build, publish and update a library all the time while testing.
   • Run the command npm link ngx-ionic-image-viewer inside the projects folder to link the global installation target into your project’s node_modules folder.
   • ionic serve: Start a local dev server for app dev/testing. Navigate to http://localhost:8100/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Check package.json for lifecycle events

Release & Publishing

Run npm run release to create a new build & release with release-it. This bumps the version of projects/ngx-ionic-image-viewer/package.json, uses conventional-changelog to update CHANGELOG.md, commits package.json and CHANGELOG.md and tags a new release. The new release gets published to GitHub and npm automatically.

Check package.json and .release-it.json for lifecycle events

Once the confirmation of npm has been received, the command npm run demo:update can be run to update the demo to the latest version and commit the change.

Manual Publishing

After building your library with ng build ngx-ionic-image-viewer, go to the dist folder cd dist/ngx-ionic-image-viewer and run npm publish.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Committing

Run npx git-cz to generate a valid commit message. It’s easy to forget about the commit convention so to be consistent use commitizen to generate our commits and husky to manage a Git commit-msg hook to validate the commit message. Further information: How to automate versioning and publication of an npm package

Author

Simon Golms

• Digital Card: npx simongolms
• Github: @simongolms
• Website: gol.ms

Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

License

Copyright © 2019 Simon Golms.
This project is MIT licensed.