Press "Enter" to skip to content

An Image Viewer Component for Angular 2+ | NgxImageViewer

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


See Demo And Download

Official Website(jpilfold): Click Here

This superior jQuery/javascript plugin is developed by jpilfold. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.