#233 updated demo: added outline

build/app/app.component.css

@@ -72,3 +72,7 @@ pdf-viewer {
     background-color: #3f51b5;
     transition: .5s width;
 }
+
+.outline-list li a {
+    cursor: pointer;
+}

build/app/app.component.d.ts

@@ -15,14 +15,19 @@ export declare class AppComponent {
     showAll: boolean;
     autoresize: boolean;
     fitToPage: boolean;
+    outline: any[];
+    isOutlineShown: boolean;
+    private pdfComponent;
     constructor();
     setCustomWorkerPath(): void;
     incrementPage(amount: number): void;
     incrementZoom(amount: number): void;
     rotate(angle: number): void;
     onFileSelected(): void;
     afterLoadComplete(pdf: PDFDocumentProxy): void;
+    loadOutline(): void;
     onError(error: any): void;
     onProgress(progressData: PDFProgressData): void;
     getInt(value: number): number;
+    navigateTo(destination: any): void;
 }

build/app/app.component.html

@@ -137,7 +137,7 @@ <h2>Angular 2+ PDF Viewer</h2>
                 </button>
             </div>
 
-            <div>
+            <div mdl>
                 <button (click)="rotate(-90)" class="mdl-button mdl-js-button">Rotate left</button>
                 <div class="page-number mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input [value]="rotation"
@@ -150,13 +150,42 @@ <h2>Angular 2+ PDF Viewer</h2>
                 <button (click)="rotate(90)" class="mdl-button mdl-js-button">Rotate right</button>
             </div>
 
+            <div mdl *ngIf="showAll">
+                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="outline">
+                    <input type="checkbox" id="outline" class="mdl-switch__input"
+                           [checked]="isOutlineShown"
+                           [(ngModel)]="isOutlineShown"
+                    >
+                    <span class="mdl-switch__label">Show outline</span>
+                </label>
+            </div>
+
+            <div *ngIf="showAll && isOutlineShown">
+                <ul *ngFor="let item of outline" class="outline-list">
+                    <li>
+                        <a (click)="navigateTo(item.dest)">
+                            {{ item.title }}
+                        </a>
+
+                        <ul *ngFor="let child of item.items">
+                            <li>
+                                <a (click)="navigateTo(child.dest)">
+                                    {{ child.title }}
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </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"

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":{"__ctor__":[{"__symbolic":"constructor"}],"setCustomWorkerPath":[{"__symbolic":"method"}],"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":{"__ctor__":[{"__symbolic":"constructor"}],"setCustomWorkerPath":[{"__symbolic":"method"}],"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":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":{"pdfComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../pdf-viewer/pdf-viewer.component","name":"PdfViewerComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"setCustomWorkerPath":[{"__symbolic":"method"}],"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"loadOutline":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"getInt":[{"__symbolic":"method"}],"navigateTo":[{"__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":{"pdfComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../pdf-viewer/pdf-viewer.component","name":"PdfViewerComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"setCustomWorkerPath":[{"__symbolic":"method"}],"incrementPage":[{"__symbolic":"method"}],"incrementZoom":[{"__symbolic":"method"}],"rotate":[{"__symbolic":"method"}],"onFileSelected":[{"__symbolic":"method"}],"afterLoadComplete":[{"__symbolic":"method"}],"loadOutline":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}],"onProgress":[{"__symbolic":"method"}],"getInt":[{"__symbolic":"method"}],"navigateTo":[{"__symbolic":"method"}]}}}}]