## 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:

## Upgrading from prior to 3.0

Take a look at this quick tutorial! ## Donate:

You can donate on my Patreon!

My Patreon o/

Demo:

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

Requirements:

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: ```bash $ npm install iv-viewer --save $ npm install ng2-image-viewer --save ``` ## Consuming the library And then from your Angular `AppModule`: ```typescript 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: ```json "styles": [ "../node_modules/ng2-image-viewer/imageviewer.scss" ], ``` Once your library is imported, you can use its components, directives and pipes in your Angular application: ```xml

Image Viewer

``` ## Changelog

- Next versions spoilers:

- 3.0:

- 2.0:

- 1.0.9:

- 1.0.8:

## Development To generate all `*.js`, `*.d.ts` and `*.metadata.json` files: ```bash $ npm run build ``` To lint all `*.ts` files: ```bash $ npm run lint ``` ## License MIT © [brenoprata10](mailto:brenoprata10@gmail.com)