@t.simon/ionic-image-viewer
v2.1.8
Published
The angular workspace to develop the ngx-ionic-image-viewer component
Downloads
17
Maintainers
Readme
This repo is a fork of ngx-ionic-image-viewer. This repo uses latest version of angular and is ivy compatible
ngx-ionic-image-viewer
An Ionic Angular module to view & zoom on images and photos works with swiperjs, so it works with Ionic7.
Demo
Overview
Prerequisites
- ionic >= 4.0.0
- angular >= 8.0.0
Installation
npm install --save npm i @t.simon/ionic-image-viewer
Usage
Import
Import the module and add it to your imports section in your main AppModule:
import {NgxIonicImageViewerModule} from '@t.simon/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 '@t.simon/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 @t.simon/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 '@t.simon/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 @t.simon/ionic-image-viewer
inside the libs 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 libs/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
Thomas Simon
- Github: @t.simon
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 © 2023 Thomas Simon. This project is MIT licensed.