【Angular6】画像を拡大したり、ドラッグ移動をできるようにする

こんにちは

画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか？
今回はそれらが簡単にできるViewer.jsをAngular6に導入してみます。

こんなことが出来るようになります。
デモ

ソースはこちらから
github

使い方は簡単です。

先ず、パッケージをインストールします。

$ npm install viewerjs

型ファイルを入れる必要があるなら下記を実行してください

$ npm install @types/viewerjs

Viewer.jsで使用するcssをAngularに読み込ませないと行けないので、.angular-cli.jsonに下記を記述します。

"styles": [
        "../node_modules/viewerjs/dist/viewer.min.css"
      ]

index.component.htmlを用意

<div class="image-area">
  <img src="test.jpg">
</div>

index.component.tsを用意

import Viewer from 'viewerjs';

public ngOnInit(): void {
  this.createOperatingFile();
}

private createOperatingFile() {

  const img = this.elementRef.nativeElement.querySelector('.image-area > img') as HTMLElement;

  this.viewer = new Viewer(img, {
    inline: true
  });
}

これで完成です。
Viewer.jsは色々オプションを設定できるので試してみてください。