Angular Image Viewer Component : NgxImageViewer

A configurable Angular image viewer component, compatible with Angular image viewer 2.x, 4.x and 5.x.


  • Compatible with Angular 2.x, 4.x and 5.x
  • Configurable
  • Rotate image
  • Zoom image
  • Configurable
  • Resizeble component
  • Supports JPEG, PNG, GIF and PDF
  • Support File Objects
  • Avaliable actions:
    • Rotate
    • Zoom
    • Reset to maximize size
    • Free movable
    • Change page (available just for PDF files)

Configuration can be provided at the module level (by passing the object as an argument to for Root(), or at the component level, by passing it as the config input.

 btnClass: default, // The CSS class(es) that will apply to the buttons
 zoomFactor: 0.1, // The amount that the scale will be increased by
 containerBackgroundColor: #ccc, // The color to use for the background. This can provided in hex, or rgb(a).
 wheelZoom: true, // If true, the mouse wheel can be used to zoom in
 allowFullscreen: true, // If true, the fullscreen button will be shown, allowing the user to entr fullscreen mode
 allowKeyboardNavigation: true, // If true, the left / right arrow keys can be used for navigation
 btnIcons: { // The icon classes that will apply to the buttons. By default, font-awesome is used.
 zoomIn: fa fa-plus,
 zoomOut: fa fa-minus,
 rotateClockwise: fa fa-repeat,
 rotateCounterClockwise: fa fa-undo,
 next: fa fa-arrow-right,
 prev: fa fa-arrow-left,
 fullscreen: fa fa-arrows-alt,
 btnShow: {
 zoomIn: true,
 zoomOut: true,
 rotateClockwise: true,
 rotateCounterClockwise: true,
 next: true,
 prev: true

To use default configuration, simply import the ImageViewerModule into your module, like so:

import { ImageViewerModule } from "ngx-image-viewer";

  imports: [
For More jquery Plugins Click


Leave a Reply

Your email address will not be published. Required fields are marked *