Skip to content

henczi/ng-magnizoom

Repository files navigation

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