Home Angular An Image Viewer Component for Angular 2+ | NgxImageViewer

An Image Viewer Component for Angular 2+ | NgxImageViewer

Angular webcodeflow · June 17, 2022 · 0 Comment

NgxImageViewer is a configurable angular image viewer component, compatible with Angular 2.x, 4.x, and 5.x.

ngx image viewer demo, ngx image viewer stackblitz, angular image viewer demo, ng2 image viewer, ng2 image viewer demo, clarivateangular image viewer

Features:

Compatible with Angular 2.x, 4.x and 5.x
Configurable
Rotate image
Zoom image
Drag to move image
Toggle fullscreen mode

How to make use of it:

1. To use the default configuration, simply import the ImageViewerModule into your module, like so:

import { ImageViewerModule } from "ngx-image-viewer";

@NgModule({
  //...
  imports: [
    //...
    ImageViewerModule.forRoot()
  ],
  //...
})

2. Next, add the component to your template, providing a set of image URLs.

<ngx-image-viewer  [src]="images" [(index)]="imageIndex"></ngx-image-viewer>

3. To add additional buttons use the following.

<ngx-image-viewer [src]="images" 
                  [config]="{customBtns:[{name: 'link', icon: 'fa fa-paperclip'}]}"
                  (customEvent)="handleEvent($event)">
</ngx-image-viewer>

handleEvent(event: CustomEvent) {
    console.log(`${event.name} has been click on img ${event.imageIndex + 1}`);

    switch (event.name) {
      case 'print':
        console.log('run print logic');
        break;
    }
}

configurable angular image viewer component, NgxImageViewer Plugin/Github