【Angular】pdf表示機能をpdf-Viewerで実装する

・作業環境

Angular8.0

# ライブラリのインストール
$ npm install ng2-pdf-viewer --save

# コンポーネントの作成
$ ng generate component pdf-viewer-sample

<app-routing.module.ts>

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
~~~~
~~~~
import { PdfViewerSampleComponent } from "./pdf-viewer-sample/pdf-viewer-sample.component"; //これを追加！

const routes: Routes = [
 
  { path: "pdf-viewer", component: PdfViewerSampleComponent },//これを追加！
 
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

<app.module.ts>

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
~~~~
~~~~ 
import { PdfViewerModule } from "ng2-pdf-viewer"; //これを追加！
import { PdfViewerSampleComponent } from './pdf-viewer-sample/pdf-viewer-sample.component';//これを追加！

@NgModule({
  declarations: [
    AppComponent,
    ~~~~
    ~~~~
    PdfViewerSampleComponent,//これを追加！
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ~~~~
    ~~~~
    PdfViewerModule,//これを追加！
  ],
  providers: [],
})
export class AppModule {}

<pdf-viewer-sample.component.ts>

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-pdf-viewer-sample",
  templateUrl: "./pdf-viewer-sample.component.html",
  styleUrls: ["./pdf-viewer-sample.component.css"],
})
export class PdfViewerSampleComponent implements OnInit {
  pdfSrc = "../assets/pdf-test.pdf"; //これを追加！

  constructor() {}

  ngOnInit() {}
}

<pdf-viewer-sample.component.html>

<pdf-viewer id="viewer" [src]="pdfSrc"></pdf-viewer>

参照：https://www.npmjs.com/package/ng2-pdf-viewer