ngx-image-viewer-directive

Preview

A basic image viewer based on Angular directives

Quick Start

• Install package

yarn add ngx-image-viewer-directive

Usage

• Add ImageViewerModule and data provider to NgModule

import { MainComponent } from './main/main.component';
import { ImageViewerModule } from 'ngx-image-viewer-directive';

@NgModule({
    imports: [
        ...
        ImageViewerModule
    ],
    exports: [],
    declarations:[MainComponent]
})
export class AppModule { }

• Add imageViewer to <img> tag in .html file

 <img id="image"
      [src]="imgSourceUrl"
      imageViewer>

Supported events

| Events | Description | | :-------------- | :------------------------------------ | | Button | Zoom(in/out)/Close | | Mouse wheel | Zoom(in/out) | | Mouse click | Pan/Zoom(in/out) | | Touch | Pan/Refresh/Zoom (not supported yet) | | Backdrop | Close |