ngx-ionic-image-viewer-multiple
v0.0.2
Published
An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.
Downloads
9
Maintainers
Readme
ngx-ionic-image-viewer
An Ionic 4 Angular module to view & zoom on images and photos without any additional dependencies.
Demo
Overview
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
Run the command to start the build every time a file change:
npm run build:watch
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’snode_modules
folder. ionic serve
: Start a local dev server for app dev/testing. Navigate tohttp://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.