Angular image viewer with zoom, rotate and fullscreen
npm install ngx-smart-image-viewerbash
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
`
Make sure screenfull is installed:
`bash
npm install screenfull
`
🎯 Custom Buttons
`ts
viewerConfig = {
customBtns: [
{ name: 'download', icon: 'fa fa-download' },
{ name: 'info', icon: 'fa fa-info-circle' }
]
};
`
Listen to events:
`html
[src]="images"
(customEvent)="handleCustomEvent($event)">
`
`ts
handleCustomEvent(event: CustomEvent) {
console.log(event.name, event.imageIndex);
}
``
⌨️ Keyboard Controls
Key Action
← Previous image
→ Next image
Enabled when allowKeyboardNavigation: true.
🧱 Angular Compatibility
Angular Version Status
16 ✅ Supported
17 ✅ Supported
18 ✅ Supported
19 ✅ Supported