ngx-ionic-image-viewer

ngx-ionic-image-viewer

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

Demo

Overview

• Prerequisites
• Installation
• Usage
• Properties
• Workspace
  • Development server
  • Code scaffolding
  • Build
  • Release
  • 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 the module and add it to your imports section in your main AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [AppRoutingModule, BrowserModule, IonicModule.forRoot(), NgxIonicImageViewerModule],
  providers: [
    StatusBar,
    SplashScreen,
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    }
  ],
  bootstrap: [AppComponent]
})
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: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    NgxIonicImageViewerModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

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

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
  </div>
  <ion-img-viewer title="" alt="" text="" src="./assets/img/demo.jpg"></ion-img-viewer>
</ion-content>

Properties

alt
Description	This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
Attribute	alt
Type	string | undefined
scheme
Description	Sets the color scheme.
Attribute	scheme
Type	"auto" | "dark" | "light" | undefined
Default	"auto"
slideOptions
Description	Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
Attribute	slideOptions
Type	object | undefined
Default	{ centeredSlides: 'true', zoom: { enabled: true } }
src
Description	The image URL. This attribute is mandatory for the <img> element.
Attribute	src
Type	string | undefined
text
Description	Sets the text in the footer of the viewer.
Attribute	text
Type	string | undefined
title
Description	Sets the title in the header of the viewer.
Attribute	title
Type	string | undefined

Workspace

This project was generated with Angular CLI version 8.3.14.

Development server

1. Run the build command every time a file change

   ./ngx-ionic-image-viewer-workspace $ ng build --watch
   

2. Create a local symlink using npm link 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.

   ./ngx-ionic-image-viewer-workspace/dist/ngx-ionic-image-viewer $ npm link
   

3. Run the npm link command inside the projects folder to link the global installation target into your project’s node_modules folder.

   ./ngx-ionic-image-viewer-workspace/demo $ npm link ngx-ionic-image-viewer
   

4. 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.

   ./ngx-ionic-image-viewer-workspace/demo $ ionic serve
   

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

Run npm release to create a new release with standard-version. 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.

Check package.json and .versionrc for lifecycle events

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.

Changelog

0.1.0 (2019-12-16)

Features

• add props scheme to set color scheme (15d35e9)
• add props slideOptions to pass to the swiper instance (9429408)

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.