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
You can donate on my Patreon!
- Jquery;
- Material Icons;
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 |
To install this library, run:
$ npm install ng2-image-viewer --saveAnd 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==', 'https://picsum.photos/900/500/?random']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>- Some design changes
- Smart preview on container
- Better button adjustment on mobile devices
- 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
- 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
- Added two event emitters(OnNext and OnPrevious)
- Adjust on the smart scale when rotating
To generate all *.js, *.d.ts and *.metadata.json files:
$ npm run buildTo lint all *.ts files:
$ npm run lintMIT © brenoprata10
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent