📷 ngx-smart-image-viewer

A lightweight, customizable Angular image viewer with support for zoom, rotate, fullscreen, drag, keyboard navigation, and custom action buttons.
Compatible with Angular 16+ (strict & standalone supported).

✨ Features

$3

🔄 Rotate clockwise & counter-clockwise

🖱️ Mouse drag / pan

🖱️ Mouse wheel zoom (optional)

⌨️ Keyboard navigation (← →)

🖥️ Fullscreen support (via screenfull)

⏮️ ⏭️ Previous / Next navigation

🎛️ Config-driven buttons & icons

🧩 Custom action buttons

✅ Angular strict mode compatible

📦 Installation

``bash
npm install ngx-smart-image-viewer
`

Also install fullscreen dependency:

`bash
npm install screenfull
`

🧩 Usage

Basic Example
`html
[src]="images"
[(index)]="currentIndex"
[config]="viewerConfig">

`
`ts
images: string[] = [
'assets/img1.jpg',
'assets/img2.jpg',
'assets/img3.jpg'
];

currentIndex = 0;

viewerConfig = {
allowFullscreen: true,
zoomFactor: 0.1
};
`

⚙️ Set up

To use default configuration, simply import the SmartImageViewerComponent into your module, like so:
`ts
import { SmartImageViewerComponent } from "ngx-smart-image-viewer";

@NgModule({
//...
imports: [
//...
SmartImageViewerComponent
],
//...
})
`

⚙️ Configuration (ImageViewerConfig)

`ts
export interface ImageViewerConfig {
btnClass?: string;
zoomFactor?: number;
containerBackgroundColor?: string;
wheelZoom?: boolean;
allowFullscreen?: boolean;
allowKeyboardNavigation?: boolean;

btnShow?: {
zoomIn?: boolean;
zoomOut?: boolean;
rotateClockwise?: boolean;
rotateCounterClockwise?: boolean;
next?: boolean;
prev?: boolean;
};

btnIcons?: {
zoomIn?: string;
zoomOut?: string;
rotateClockwise?: string;
rotateCounterClockwise?: string;
next?: string;
prev?: string;
fullscreen?: string;
};

customBtns?: Array<{
name: string;
icon: string;
}>;
}
`

🎛️ Default Configuration

`ts
const DEFAULT_CONFIG = {
btnClass: 'default',
zoomFactor: 0.1,
containerBackgroundColor: '#ccc',
wheelZoom: false,
allowFullscreen: true,
allowKeyboardNavigation: true,
btnShow: {
zoomIn: true,
zoomOut: true,
rotateClockwise: true,
rotateCounterClockwise: true,
next: true,
prev: true
},
btnIcons: {
zoomIn: 'fa fa-plus',
zoomOut: 'fa fa-minus',
rotateClockwise: 'fa fa-repeat',
rotateCounterClockwise: 'fa fa-undo',
next: 'fa fa-arrow-right',
prev: 'fa fa-arrow-left',
fullscreen: 'fa fa-arrows-alt'
}
};
`

🖥️ Fullscreen Support

Fullscreen is handled via a directive:
`html