Ng-image-viewer NPM

Ng image viewer

Ng image viewer is the image component project that can handle image related properties.

Features

new features will be applied in next version.

Coordinate change

How to use

And here's some code! :+1:

Import NgImageViewerModule in a specific module

@NgModule({
  imports: [ImageViewerModule]
  declarations: [TestComponent]
})
export class TestModule {}

Set input properties to describe a image view. All attributes bind to image view component (*impotant: unless setting a value to each attribute, default value will be set)

export class TestComponent {
  imageUrl:string = 'guilin.jpg';
  type:string = 'px';
  width:number = 500;
  height:number = 738;
  frameSize:number = 300;
  repeatCoordinate:string = 'x';
  backgroundImgCoordinateX:number = -285;
  backgroundImgCoordinateY:number = 10;
  borderImageRepeat:string = 'round';
  imgFrameStyle:{} = {};
  evtEmitter = new EventEmitter();

  leftEvent(e:Event) {
    this.evtEmitter.emit({
      'event': e,
      'direction': 'left',
      'cb': (x, y) => {console.log('left cb works');}
    });
  }

  rightEvent(e:Event) {
    this.evtEmitter.emit({
      'event': e,
      'direction': 'right',
      'cb': (x, y) => {console.log('right cb works');}
    });
  }
}

Bind pre-defined attributes to image view component (please check attributes options)

<image-viewer [imageUrl]="imageUrl"
                 [type]="type"
                 [width]="width"
                 [height]="height"
                 [frameSize]="frameSize"
                 [repeatCoordinate]="repeatCoordinate"
                 [backgroundImgCoordinateX]="backgroundImgCoordinateX"
                 [backgroundImgCoordinateY]="backgroundImgCoordinateY"
                 [borderImageRepeat]="borderImageRepeat"
                 [imgFrameStyle]="imgFrameStyle"
                 [coordinateEmitter]="evtEmitter">Image viewer loading...
 </image-viewer>
 <button (click)="leftEvent($event)">left</button>
 <button (click)="rightEvent($event)">right</button>