Ng-Magnizoom

DEMO: Stackblitz

Getting Started

Step 1: Installing via NPM

npm install ng-magnizoom

Step 2: Importing the module

import { NgMagnizoomModule } from 'ng-magnizoom';

@NgModule({
  ...
  imports: [
    ... ,
    NgMagnizoomModule
  ],
  ...
})
export class AppModule {}

Usage

Use the ng-magnizoom component with the imageSrc input to render the image with zoom options.

...
  <ng-magnizoom
    zoomMode="LENS"
    imageSrc="/path/to">
  </ng-magnizoom>
...

Options

Name | Type | Default | Two-way binding | Description --- | --- | --- | --- | --- imageSrc | string | (required) | - | Image source (url) zoomMode | 'LENS', 'COVER' | 'COVER' | - | Mode minZoomFactor | number | 1.2 | - | Minimum zooming factor maxZoomFactor | number | 3 | - | Maximum zooming factor imageStyle | { [x: string]: any; } | - | - | ngSytle for image canvas element imageClass | any | - | | ngClass for image canvas element zoomFactor | number | 2 | x | current zoom level (between minZoomFactor and maxZoomFactor) lensSizeUnit | 'NORMALIZED', 'PIXEL' | 'NORMALIZED' | - | 'NORMALIZED' - between 0 and 1, 'PIXEL' - pixel value lensSize | { width: number, height: number } | { width: 0.5, height: 0.5 } | - | The size of the lens in lensSizeUnit zoomCenterUnit | 'NORMALIZED', 'PIXEL' | 'NORMALIZED' | - | 'NORMALIZED' - between 0 and 1, 'PIXEL' - pixel value zoomCenter | { x: number, y: number } or undefined | undefined | x | The center of the zoom, undefined if not in zoom mode updateOnMouseEvents | boolean | true | - | Whether or not the magnifier uses the mouse events