NOTICE: This package is now maintained under the Angular Compatibility Maintenance Initiative
This package has been included in the Angular Compatibility Maintenance Initiative to ensure it remains compatible with the latest versions of Angular, despite not receiving active feature development or bug fixes. This initiative is a community-driven effort to maintain libraries that are critical for Angular projects but are no longer actively developed.
Important Considerations:
- Maintenance Scope: Updates will focus solely on Angular version compatibility. No new features will be added, and existing bugs will not be addressed outside of compatibility concerns.
- Temporary Solution: This maintenance effort is intended as a temporary measure. Users are strongly encouraged to plan for the migration to actively supported alternatives as they become available.
- Contribution: If you are interested in contributing to the maintenance of this package or others within the initiative.
By using this package, you acknowledge the limitations of its maintenance under the Angular Compatibility Maintenance Initiative and the recommendation to seek more permanent solutions.
Package Name: @ngx-maintenance/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
Take a look at this quick tutorial!
You can donate on my Patreon!
- 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 @ngx-maintenance/ng2-image-viewer --save
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"
],
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
- 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!
- 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
MIT © brenoprata10