まず、ngx-doc-viewerをプロジェクトに追加する方法から始めましょう。Angularプロジェクトのルートディレクトリで、次のコマンドを実行してngx-doc-viewerをインストールします。
npm install ngx-doc-viewerインストールが完了したら、Angularコンポーネントでngx-doc-viewerを使用するための準備が整います。コンポーネントのテンプレートファイルで、次のようにngx-doc-viewerを配置します。
<ngx-doc-viewer [documentUrl]="documentUrl"></ngx-doc-viewer>上記のコードでは、documentUrlというプロパティを使用してドキュメントのURLを指定しています。このプロパティを適切な値に設定することで、ngx-doc-viewerが指定したドキュメントを表示します。
さらに、ngx-doc-viewerにはさまざまな設定オプションがあります。例えば、ドキュメントの表示サイズやズームレベルを調整することができます。公式のドキュメントを参照して、さまざまなオプションを試してみてください。
以下は、簡単なコード例です。Angularコンポーネントでngx-doc-viewerを使用する例を示します。
import { Component } from '@angular/core';
@Component({
selector: 'app-doc-viewer',
templateUrl: './doc-viewer.component.html',
styleUrls: ['./doc-viewer.component.css']
})
export class DocViewerComponent {
documentUrl = 'https://example.com/sample-document.pdf';
}上記のコードでは、documentUrlを'https://example.com/sample-document.pdf'に設定しています。実際のプロジェクトでは、この値を適切なドキュメントのURLに置き換えてください。
以上がngx-doc-viewerのシンプルで簡単な使い方とコード例です。このドキュメントビューアを使用することで、Angularアプリケーションに簡単にドキュメント表示機能を追加することができます。