1.0.1

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 1.0.1
+* [[#48](https://github.com/VadimDez/ng2-pdf-viewer/issues/48)] - Use ngOnchanges() instead of update() inside setters
+
 ## 1.0.0
 
 #### Breaking changes

dist/pdf-viewer.component.d.ts

@@ -1,34 +1,28 @@
 /// <reference types="pdf" />
-import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import 'pdfjs-dist/build/pdf.combined';
-export declare class PdfViewerComponent implements OnInit {
+export declare class PdfViewerComponent implements OnChanges {
     private element;
     private _showAll;
     private _renderText;
     private _originalSize;
-    private _src;
     private _pdf;
     private _page;
     private _zoom;
-    private wasInvalidPage;
     private _rotation;
-    private isInitialised;
-    private lastLoaded;
     afterLoadComplete: EventEmitter<PDFDocumentProxy>;
     constructor(element: ElementRef);
-    ngOnInit(): void;
-    src: any;
+    src: string | Uint8Array | PDFSource;
     page: any;
     pageChange: EventEmitter<number>;
     renderText: boolean;
     originalSize: boolean;
     showAll: boolean;
     zoom: number;
     rotation: number;
+    ngOnChanges(changes: SimpleChanges): void;
+    private loadPDF();
     private update();
-    private main();
-    private loadPDF(src);
-    private onRender();
     private renderMultiplePages();
     private isValidPageNumber(page);
     private buildSVG(viewport, textContent);

dist/pdf-viewer.component.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":1,"metadata":{"PdfViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pdf-viewer","template":"<div class=\"ng2-pdf-viewer-container\" [ngClass]=\"{'ng2-pdf-viewer--zoom': zoom < 1}\"></div>","styles":["\n.ng2-pdf-viewer--zoom {\n  overflow-x: scroll;\n}\n\n:host >>> .ng2-pdf-viewer-container > div {\n  position: relative;\n  z-index: 0;\n}\n\n:host >>> .textLayer {\n  font-family: sans-serif;\n  overflow: hidden;\n}\n  "]}]}],"members":{"afterLoadComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["after-load-complete"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"renderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["render-text"]}]}],"originalSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["original-size"]}]}],"showAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["show-all"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["zoom"]}]}],"rotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["rotation"]}]}],"update":[{"__symbolic":"method"}],"main":[{"__symbolic":"method"}],"loadPDF":[{"__symbolic":"method"}],"onRender":[{"__symbolic":"method"}],"renderMultiplePages":[{"__symbolic":"method"}],"isValidPageNumber":[{"__symbolic":"method"}],"buildSVG":[{"__symbolic":"method"}],"renderPageOverlay":[{"__symbolic":"method"}],"renderPage":[{"__symbolic":"method"}],"removeAllChildNodes":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"PdfViewerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"pdf-viewer","template":"<div class=\"ng2-pdf-viewer-container\" [ngClass]=\"{'ng2-pdf-viewer--zoom': zoom < 1}\"></div>","styles":["\n.ng2-pdf-viewer--zoom {\n  overflow-x: scroll;\n}\n\n:host >>> .ng2-pdf-viewer-container > div {\n  position: relative;\n  z-index: 0;\n}\n\n:host >>> .textLayer {\n  font-family: sans-serif;\n  overflow: hidden;\n}\n  "]}]}],"members":{"afterLoadComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["after-load-complete"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pageChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"renderText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["render-text"]}]}],"originalSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["original-size"]}]}],"showAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["show-all"]}]}],"zoom":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["zoom"]}]}],"rotation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["rotation"]}]}],"ngOnChanges":[{"__symbolic":"method"}],"loadPDF":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"renderMultiplePages":[{"__symbolic":"method"}],"isValidPageNumber":[{"__symbolic":"method"}],"buildSVG":[{"__symbolic":"method"}],"renderPageOverlay":[{"__symbolic":"method"}],"renderPage":[{"__symbolic":"method"}],"removeAllChildNodes":[{"__symbolic":"method"}]}}}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-pdf-viewer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Angular2 component for rendering PDF",
   "main": "dist/index.js",
   "typings": "./dist/index.d.ts",

src/pdf-viewer/pdf-viewer.component.ts

@@ -2,7 +2,7 @@
  * Created by vadimdez on 21/06/16.
  */
 import {
-  Component, Input, Output, ElementRef, EventEmitter, OnInit, OnChanges, SimpleChanges
+  Component, Input, Output, ElementRef, EventEmitter, OnChanges, SimpleChanges
 } from '@angular/core';
 import 'pdfjs-dist/build/pdf.combined';
 
@@ -26,26 +26,19 @@ import 'pdfjs-dist/build/pdf.combined';
   `]
 })
 
-export class PdfViewerComponent implements OnInit, OnChanges {
+export class PdfViewerComponent implements OnChanges {
   private _showAll: boolean = false;
   private _renderText: boolean = true;
   private _originalSize: boolean = true;
   private _pdf: PDFDocumentProxy;
   private _page: number = 1;
   private _zoom: number = 1;
   private _rotation: number = 0;
-  private isInitialised: boolean = false;
-  private lastLoaded: string;
 
   @Output('after-load-complete') afterLoadComplete = new EventEmitter<PDFDocumentProxy>();
 
   constructor(private element: ElementRef) { }
 
-  ngOnInit() {
-    this.main();
-    this.isInitialised = true;
-  }
-
   @Input()
   src: string | Uint8Array | PDFSource;
 
@@ -107,33 +100,25 @@ export class PdfViewerComponent implements OnInit, OnChanges {
     if ('src' in changes) {
       this.loadPDF();
     } else if (this._pdf) {
-      /*
-        TODO Opti
-        I'm not sure we really need to do a full update for all input changes:
-
-        - If only render-text changed, we could just renderPageOverlay() or clear svg
-        - If only showAll changed we could just add missing pages if it goes true
-          and just discard pages if it goes false
-      */
-
       this.update();
     }
   }
 
   private loadPDF() {
-    if (this.src) {
-      PDFJS.getDocument(this.src).then(pdf => {
-        this._pdf = pdf;
+    if (!this.src) {
+      return;
+    }
 
-        this.afterLoadComplete.emit(pdf);
+    PDFJS.getDocument(this.src).then(pdf => {
+      this._pdf = pdf;
 
-        this.update();
-      });
-    }
+      this.afterLoadComplete.emit(pdf);
+
+      this.update();
+    });
   }
 
   private update() {
-    //this will trigger page check and reset it if not valid
     this.page = this._page;
 
     if (!this._showAll) {
@@ -149,7 +134,7 @@ export class PdfViewerComponent implements OnInit, OnChanges {
 
     this.removeAllChildNodes(container);
 
-    this.renderPage(page++).then( () => {
+    this.renderPage(page++).then(() => {
       if (page <= this._pdf.numPages) {
         return this.renderPage(page++);
       }