Merge pull request #138 from VadimDez/feature/#94

Closes #94, added on-progress callback

README.md

@@ -90,6 +90,7 @@ export class AppComponent {
 * [show-all](#show-all)
 * [after-load-complete](#after-load-complete)
 * [error](#error)
+* [on-progress](#on-progress)
 
 #### [src]
 *accepts: string, object, UInt8Array*
@@ -197,6 +198,24 @@ Then add it to `pdf-component` in component's template
 (error)="onError($event)"
 ```
 
+#### (on-progress)
+
+Loading progress callback - provides progress information `total` and `loaded` bytes. Is called several times during pdf loading phase.
+
+Define callback in your component's class
+
+```ts
+onProgress(progressData: PDFProgressData) {
+  // do anything with progress data. For example progress indicator
+}
+```
+
+Then add it to `pdf-component` in component's template
+
+```html
+(on-progress)="onProgress($event)"
+```
+
 ## Contribute
 
 Clone the project

build/app/app.component.css

@@ -35,4 +35,25 @@ pdf-viewer {
 
 .error {
     color: #ff4146;
-}
+}
+
+#progress {
+    margin-top: 50px;
+    width: 100px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+#progress .bar,
+#progress .bg {
+    height: 20px;
+}
+#progress .bg {
+    background-color: #e3e3e3;
+}
+#progress .bar {
+    width: 0;
+    max-width: 100%;
+    background-color: #3f51b5;
+    transition: .5s width;
+}

build/app/app.component.d.ts

@@ -9,10 +9,14 @@ export declare class AppComponent {
     showAll: boolean;
     pdf: any;
     renderText: boolean;
+    progressData: PDFProgressData;
+    isLoaded: boolean;
     incrementPage(amount: number): void;
     incrementZoom(amount: number): void;
     rotate(angle: number): void;
     onFileSelected(): void;
     afterLoadComplete(pdf: PDFDocumentProxy): void;
     onError(error: any): void;
+    onProgress(progressData: PDFProgressData): void;
+    getInt(value: number): number;
 }

build/app/app.component.html

@@ -109,6 +109,13 @@ <h2>Angular 2 PDF Viewer</h2>
                 <button (click)="rotate(90)" class="mdl-button mdl-js-button">Rotate right</button>
             </div>
 
+            <div *ngIf="!isLoaded && !error && progressData" id="progress">
+                <div class="bg">
+                    <div class="bar" [style.width]="progressData.loaded / progressData.total * 100 + '%'"></div>
+                </div>
+                <span>{{ getInt(progressData.loaded / progressData.total * 100) }}%</span>
+            </div>
+
             <pdf-viewer [src]="pdfSrc"
                         [(page)]="page"
                         [rotation]="rotation"
@@ -118,6 +125,7 @@ <h2>Angular 2 PDF Viewer</h2>
                         [zoom]="zoom"
                         [render-text]="renderText"
                         (error)="onError($event)"
+                        (on-progress)="onProgress($event)"
             ></pdf-viewer>
 
         </div>

build/app/app.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":3,"metadata":{"AppComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"pdf-viewer-app","templateUrl":"./app.component.html","styleUrls":["./app.component.css"]}]}],"members":{"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"AppComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"pdf-viewer-app","templateUrl":"./app.component.html","styleUrls":["./app.component.css"]}]}],"members":{"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"AppComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"pdf-viewer-app","templateUrl":"./app.component.html","styleUrls":["./app.component.css"]}]}],"members":{"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"getInt":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"AppComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"moduleId":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"module"},"member":"id"},"selector":"pdf-viewer-app","templateUrl":"./app.component.html","styleUrls":["./app.component.css"]}]}],"members":{"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"getInt":[{"__symbolic":"method"}]}}}}]

build/pdf-viewer/pdf-viewer.component.d.ts

@@ -13,6 +13,7 @@ export declare class PdfViewerComponent implements OnChanges {
     private resizeTimeout;
     afterLoadComplete: EventEmitter<PDFDocumentProxy>;
     onError: EventEmitter<any>;
+    onProgress: EventEmitter<PDFProgressData>;
     constructor(element: ElementRef);
     src: string | Uint8Array | PDFSource;
     page: any;