Ngx-panster NPM

ngx-panster - A simple content panning/zooming library

NgxPanster is a simple Angular 17 content panning and zooming library.

Installation

npm install ngx-panster

DEMO

You can find a stackblitz demo here.

Usage

<button  (click)="panster.zoomIn(25)">Zoom in</button>
<button  (click)="panster.zoomOut(25)">Zoom out</button>
<button  (click)="panster.centerContentTop()">Center top</button>
<button  (click)="panster.centerContent()">Center</button>
<ngx-panster  #panster>
	<!-- CONTENT -->
</ngx-panster>

The library uses the Standalone API

import { NgxPansterComponent } from 'ngx-panster';

@Component({
	selector:  'app-root',
	standalone:  true,
	imports:  [NgxPansterComponent],
	templateUrl:  './app.component.html',
})
export  class  AppComponent {}

NgxPansterComponent inputs

Name	Description
zoomPercentage: number	Sets the zoom of the content (good use case is with slider to determine the zoom)
minZoom: number	The minimum zoom percentage allowed. Calling zoomOut will set the zoom to minZoom's value if the new value would be less than minZoom. Defaults to 10
maxZoom: number	The maximum zoom percentage allowed. Calling zoomOut will set the zoom to maxZoom's value if the new value would be greater than maxZoom. No default value
zoomStep: number	Sets the default zoomIn/zoomOut value. Defaults to 25%.

NgxPansterComponent methods

Method name	Description
zoomIn(percentage: number)	A method that receives a percentage (25 for 25%) and zooms the content in with the given percentage
zoomOut(percentage: number)	A method that receives a percentage (25 for 25%) and zooms the content out with the given percentage
centerContent()	A method that centers the content both vertically and horizontally
centerContentTop()	A method that centers the content both horizontally and aligns it to the top
centerElementPoint(x: number, y: number)	A method that receives pageX and pageY coordinates and centers them within the pan element. If the x and y coordinates are NOT within the pan element then this function does nothing.
centerX()	A method that centers the content horizontally
centerY()	A method that centers the content vertically