Installations
npm install ng2-image-viewer-forkedDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=6.0.0
Node Version
13.8.0
NPM Version
6.13.7
Releases
Unable to fetch releases
Contributors
3
Unable to fetch Contributors
Languages
4
JavaScript
TypeScript
CSS
HTML
JavaScript (51.59%)
TypeScript (25.37%)
CSS (16.17%)
HTML (6.87%)
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Developer
Download Statistics
Total Downloads
1,556
Last Day
1
Last Week
2
Last Month
9
Last Year
171
GitHub Statistics
MIT License
31 Stars
79 Commits
60 Forks
5 Watchers
9 Branches
3 Contributors
Updated on Mar 01, 2024
Maintainers
1
Package Meta Information
Latest Version
2.0.0
Package Id
ng2-image-viewer-forked@2.0.0
Unpacked Size
105.26 kB
Size
21.20 kB
File Count
19
NPM Version
6.13.7
Node Version
13.8.0
Total Downloads
Cumulative downloads
Total Downloads
1,556
Last Day
0%
1
Compared to previous day
Last Week
100%
2
Compared to previous week
Last Month
-52.6%
9
Compared to previous month
Last Year
-36.7%
171
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
38
@angular/common@angular/compiler@angular/compiler-cli@angular/core@angular/platform-browser@angular/platform-browser-dynamic@compodoc/compodoc@types/jasmine@types/nodeangular-in-memory-web-apicodelyzerconcurrentlycore-jsdelgulpgulp-renamegulp-rollupjasmine-corejasmine-spec-reporterkarmakarma-chrome-launcherkarma-clikarma-coverage-istanbul-reporterkarma-jasminekarma-jasmine-html-reporterlite-servernode-sassnode-sass-tilde-importernode-watchprotractorrolluprun-sequencerxjssystemjsts-nodetslinttypescriptzone.js
Welcome to Ng2-Image Viewer
This component uses the Image Viewer JS in it's core.
Ng2-Image Viewer uses MIT license, so you can use it as you wish, feel free to help contributing with the code.
This component allows you to:
- Show images and PDF files, you can navigate through it;
- You can load URL images, Base64 images and pdf;
- Rotate each image as you wish;
- Download images and PDF files (no additional configuration required);
- Zoom in and out;
- Fullscreen your files;
- Fully responsive design
Upgrading from prior to 3.0
Take a look at this quick tutorial!
Donate:
You can donate on my Patreon!
Demo:
Requirements:
- Material Icons;
How to use it:
The component already have some input references:
| Name | Type | Required | Default Value | Description |
| idContainer | string | X | NULL | It is the id of the component on the HTML, this parameter allows you to inject as many components as you wish. |
| images | BASE64/URL[] | NULL | It is the array containing the base64 data, the component differs the images and the PDF files, so don't worry. | |
| defaultDownloadName | string | 'Image' | It is the default name used on the file to be downloaded, Ex: Image 1, Image 2 | |
| rotate | boolean | true | It is the boolean that renders the rotate left and right buttons | |
| resetZoom | boolean | true | It is the boolean that renders the resetZoom button | |
| zoomInButton | boolean | true | It is the boolean that renders the Zoom In Button | |
| zoomOutButton | boolean | true | It is the boolean that renders the Zoom Out Button | |
| zoomInTooltipLabel | string | Zoom In | It is the tooltip value you want for the zoom in button | |
| zoomOutTooltipLabel | string | Zoom Out | It is the tooltip value you want for the zoom out button | |
| download | boolean | true | It is the boolean that renders the download button | |
| fullscreen | boolean | true | It is the boolean that renders the fullscreen button | |
| showOptions | boolean | true | It is the boolean that renders the options panel at the top right corner | |
| showPDFOnlyOption | boolean | true | It is the boolean that renders the PDF only button | |
| loadOnInit | boolean | false | It is the boolean that lets you choose if you want to load the component on the OnInit event or on the OnChanges event, It was created because i faced some trouble with the primeNG tab using the change event. | |
| primaryColor | string | '#0176bd' | It is the background-color used on the footer and on the options panel | |
| buttonsColor | string | 'white' | It is the color used on the buttons on the options panel | |
| buttonsHover | string | '#333333' | It is the color used on the hover event, when the button receive the mouse pointer | |
| enableTooltip | boolean | true | It is the boolean that renders the tooltips above the buttons | |
| rotateRightTooltipLabel | string | 'Rotate right' | It is the tooltip value you want for the rotate right button | |
| rotateLeftTooltipLabel | string | 'Rotate left' | It is the tooltip value you want for the rotate left button | |
| resetZoomTooltipLabel | string | 'Reset zoom' | It is the tooltip value you want for the reset zoom button | |
| fullscreenTooltipLabel | string | 'Fullscreen' | It is the tooltip value you want for the fullscreen button | |
| downloadTooltipLabel | string | 'Download' | It is the tooltip value you want for the download button | |
| showPDFOnlyLabel | string | 'Show only PDF' | It is the tooltip value you want for the show PDF only button | |
| openInNewTabTooltipLabel | string | 'Open in new tab' | It is the tooltip value you want for the open in new tab button | |
| onNext | EventEmitter | It is the event triggered when you change to next file, it emits the actual index of the array on the component | ||
| onPrevious | EventEmitter | It is the event triggered when you change to previous file, it emits the actual index of the array on the component |
Installation
To install this library, run:
1$ npm install iv-viewer --save 2$ npm install ng2-image-viewer --save
Consuming the library
And then from your Angular AppModule:
1import { BrowserModule } from '@angular/platform-browser'; 2import { NgModule } from '@angular/core'; 3 4import { AppComponent } from './app.component'; 5 6// Import your library 7import { ImageViewerModule } from 'ng2-image-viewer'; 8 9@NgModule({ 10 declarations: [ 11 AppComponent 12 ], 13 imports: [ 14 BrowserModule, 15 16 // Specify your library as an import 17 ImageViewerModule 18 ], 19 providers: [], 20 bootstrap: [AppComponent] 21}) 22export class AppModule { }
Now just add the these codes on your angular-cli.json file:
1"styles": [ 2 "../node_modules/ng2-image-viewer/imageviewer.scss" 3],
Once your library is imported, you can use its components, directives and pipes in your Angular application:
1<!-- You can now use your library component in app.component.html --> 2<h1> 3 Image Viewer 4</h1> 5<app-image-viewer [images]="['iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', 'https://picsum.photos/900/500/?random']" 6[idContainer]="'idOnHTML'" 7[loadOnInit]="true"></app-image-viewer>
Changelog
- Next versions spoilers:
- Some design changes
- Smart preview on container
- Better button adjustment on mobile devices
- 3.0:
- No longer uses Jquery!
- Uses iv-viewer as peerDependency
- Now the viewer uses the version 2.0 from Image Viewer JS, which is faster and fixes some bugs!
- 2.0:
- Better performance
- Smarter scaling when image overflows the container when rotated
- Added support to URL images
- Added Zoom in and Zoom out buttons
- Added support to open url images in new tabs
- Added tooltip label for url images in new tabs
- 1.0.9:
- Increased performance
- Fix bug when rotating images
- Added tooltips
- Added input to hide tooltips
- Added input to costumize tooltips labels
- Added new button: Show PDF only
- Added new input to hide showPDFOnly button
- Some design changes
- 1.0.8:
- Added two event emitters(OnNext and OnPrevious)
- Adjust on the smart scale when rotating
Development
To generate all *.js, *.d.ts and *.metadata.json files:
1$ npm run build
To lint all *.ts files:
1$ npm run lint
License
MIT © brenoprata10
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 3/21 approved changesets -- score normalized to 1
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 13 are checked with a SAST tool
Reason
125 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-c75v-2vq8-878f
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-3v6h-hqm4-2rg6
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-42xw-2xvc-qx8m
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-3w3w-pxmm-2w2j
- Warn: Project is vulnerable to: GHSA-xwcq-pm8m-c4vf
- Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-297x-8xj4-vcxv
- Warn: Project is vulnerable to: GHSA-4859-gpc7-4j66
- Warn: Project is vulnerable to: GHSA-r7jx-5m6m-cpg9
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-8g7p-74h8-hg48
- Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-7x7c-qm48-pq9c
- Warn: Project is vulnerable to: GHSA-rc3x-jf5g-xvc5
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-89w7-5q45-r53w
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-82v2-mx6x-wq7q
- Warn: Project is vulnerable to: GHSA-ch52-vgq2-943f
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-hxm2-r34f-qmc5
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-q75g-2496-mxpp
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-884p-74jh-xrg2
- Warn: Project is vulnerable to: GHSA-j7fq-p9q7-5wfv
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-mgfv-m47x-4wqp
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-776f-qx25-q3cc
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.9
/10
Last Scanned on 2025-03-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More