Angular2 PDF Viewer

> PDF Viewer Component for Angular 2

Demo page

Install

``
npm install ttv-ng2-pdf-viewer --save
`

Usage

In case you're using `systemjs` see configuration here.

Add `PdfViewerComponent` to your module's `declarations`

`js
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import { PdfViewerComponent } from 'ng2-pdf-viewer';

@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, PdfViewerComponent],
bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);
`

And then use it in your component

`js
import { Component } from '@angular/core';

@Component({
selector: 'example-app',
template:


[page]="page"
[original-size]="true"
style="display: block;"
>

})
export class AppComponent {
pdfSrc: string = '/pdf-test.pdf';
page: number = 1;
}
`

Options

* src
* page
* zoom
* original-size
* show-all
* after-load-complete

#### [src]

Pass pdf location

`
[src]="'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf'"
`

For more control you can pass options object to `[src]`.

Options object for loading protected PDF would be

`js
{
url: 'https://vadimdez.github.io/ng2-pdf-viewer/pdf-test.pdf',
withCredentials: true
}
`

See more attributes here.


#### [page]
Page number

`
[page]="1"
`
supports two way data binding as well
`
[(page)]="pageVariable"
`

#### [zoom]
Zoom pdf
`
[zoom]="0.5"
`

#### [original-size]

if set to true - size will be as same as original document

if set to false - size will be as same as container block

`
[original-size]="true"
`

#### [show-all]

Show single or all pages altogether

`
[show-all]="true"
`

#### [after-load-complete]

Get PDF information with callback

First define callback function "callBackFn" in your controller,
`
callBackFn(pdf: any) {
// do anything with "pdf"
}
`

And then use it in your template:
`
[after-load-complete]="callBackFn"
`

Develop

`
npm start
``

License

MIT © Vadym Yatsyuk