ngx-image-view

The universal element/image viewer component.
Compatible with desktop and mobile touch devices.

• Zooming
• Dragging

Installation

yarn add ngx-image-view

npm i -S ngx-image-view

Import in your module:

import { NgxImageViewModule } from 'ngx-image-view';
 
@NgModule({
   imports: [NgxImageViewModule]
   
...

Examples

Full screen image viewer

Panning and zooming will be applied to all elements inside the lib-ngx-image-view tag. To prevent for example dragging for one element, use the api property to configure the element.

<style>
   body {
      padding: 0;
      margin: 0;
   }   
   .view {
      width: 100%;
      height: 100vh;
      box-sizing: border-box;
      background: black;
   }
</style> 
 
<lib-ngx-image-view class="view">
   <img data-allow-drag-preview="false"
        src="https://images.unsplash.com/photo-1510708932124-fed7feb9e1d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&q=80">
</lib-ngx-image-view>

API

[triggerReset]

Resets the zooming/position for all elements on value change.

<lib-ngx-image-view [triggerReset]="updatingValue">

data-fit-to-parent

Limits the element to have minimal the container height
default: true

<img src="..." data-fit-to-parent="true">

data-limit-to-natural

Limits the max-size of the element to its natural size. Usually useful for images which should stop scaling at 1px = 1px.
default: true

<img src="..." data-limit-to-natural="true">

data-zoom-to-center

Stay centered if width gets smaller than container width. If you want to have exact on-cursor-point zooming, even for images smaller than the container, you need to disable this, but consider the side-effect: The element might move aside while zooming and width/height is still smaller than your box.
default: true

<img src="..." data-zoom-to-center="true">

data-allow-zoom

Enable/disable zooming: default: true
When disabled, the element can not be zoomed.

<img src="..." data-allow-zoom="true">

data-allow-drag

Enable/disable dragging: default: true
When disabled, the element can not be dragged. But it still can be zoomed. The zooming follows the mouse cursor.

<img src="..." data-allow-drag="true">

data-allow-drag-preview

Enable/disable dragging the preview: default: true
Preview means:

• element.width === container.width
  for landscape elements
• element.height === container.height
  for portrait elements

<img src="..." data-allow-drag-preview="false">