ng-zoom 🔍️

Image zoom directive for Angular based apps.

ng-zoom-demo.mp4

StackBlitz Demo

---

✨ Features

• 👌 Zero-dependency
• 🧬 Perfect for dynamic content, mutation-agnostic — you can do whatever you want with images, it'll work
• ⚡️ Blazing fast — no matter if it's 10 images or 10,000
• 🤓 Powered by quirky math to precisely calculate everything and do the trick with only one transformation
• 🍦 Zero-configuration by default but extensible when you need it
• 🗿 Works flawlessly even on iOS Safari, in every orientation, with every image no matter the size and dimensions

🔑 License

MIT

🖥 Environment Support

• Angular ^13.0.0

📦 Installation

$ npm install ng-zoom

🔨 Usage

Import the ng-zoom module into the app.module.ts file.

import { NgZoomModule } from 'ng-zoom';

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

Use the ng-zoom directive in your .html files.

<img ng-zoom src="lake.png" alt="lake" />

⚙️ Configuration

Pass a NgZoomConfig object to the module's forRoot method.

import { NgZoomConfig, NgZoomModule } from 'ng-zoom';

const config: NgZoomConfig = {
  backgroundColor: 'skyblue',
};

@NgModule({
  imports: [NgZoomModule.forRoot(config)],
})
export class AppModule {}

🏷️ Config reference

Property	Type	Default	Description
backgroundColor	string	#ffffff	The background color of the wrapper element.
scaleUp	boolean	true	Defines if an element should be scaled up when zooming or maintain its original size.
padding	number	20	Padding in pixels
duration	number	300	The duration of the zoom animation in milliseconds.