Angular 6 input file, how to display preview of pdf file

Question

I have simple app where I have input where I can upload pdf file and

<input (change)="upload($event)"
       multiple
       type="file"/>

<object [data]="file" type="application/pdf">
    <embed [src]="file" type="application/pdf" />
</object>

in upload function:

upload(event) {
this.file = event.target.files[0];
}

How can I display preview of that file?

Answer 1

component.html

<input (change)="upload($event)" multiple type="file" />

<object [data]="file" type="application/pdf">
        <embed [src]="file" type="application/pdf" />
    </object>
<pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;"></pdf-viewer> 

Component.ts

export class MyComponent {
  pdfSrc: string = '/pdf-test.pdf';
  upload(event) {
    this.file = event.target.files[0];
  }
}

app.module.ts

import { PdfViewerModule } from 'ng2-pdf-viewer';
     .....

@NgModule({
  imports: [BrowserModule, PdfViewerModule]
})

You can use the ng2-pdf-viewer for the same. Install this using npm i --save ng2-pdf-viewer