node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »

ng2-image-viewer

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;
  • Rotate each image as you wish;
  • Download images and PDF files (no additional configuration required);
  • Zoom in and out;
  • Fullscreen your files;

Demo:

https://brenoprata10.github.io/ng2-image-viewer/

Requirements:

  • Jquery;
  • 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[] 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
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 options panel at the top right corner
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

Installation

To install this library, run:

$ npm install ng2-image-viewer --save

Consuming the library

$ npm install ng2-image-viewer

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import your library
import { ImageViewerModule } from 'ng2-image-viewer';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
 
    // Specify your library as an import
    ImageViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now just add the these codes on your angular-cli.json file:

"styles"[
    "../node_modules/ng2-image-viewer/imageviewer.scss"
],
"scripts"[
    "../node_modules/ng2-image-viewer/imageviewer.js"
],

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  Image Viewer
</h1>
<app-image-viewer [images]="['iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

Donate:

You can donate on my Patreon! (Any value would be more than welcomed!)

My Patreon o/

License

MIT © brenoprata10