diff --git a/ng2-components/ng2-alfresco-datatable/tslint.json b/ng2-components/ng2-alfresco-datatable/tslint.json
index e0afb6fc9c..ce1f3bcb48 100644
--- a/ng2-components/ng2-alfresco-datatable/tslint.json
+++ b/ng2-components/ng2-alfresco-datatable/tslint.json
@@ -110,10 +110,11 @@
     ],
     "whitespace": [
       true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator"
+        "check-branch",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-module"
     ]
   }
 }
diff --git a/ng2-components/ng2-alfresco-documentlist/tslint.json b/ng2-components/ng2-alfresco-documentlist/tslint.json
index e0afb6fc9c..ce1f3bcb48 100644
--- a/ng2-components/ng2-alfresco-documentlist/tslint.json
+++ b/ng2-components/ng2-alfresco-documentlist/tslint.json
@@ -110,10 +110,11 @@
     ],
     "whitespace": [
       true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator"
+        "check-branch",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-module"
     ]
   }
 }
diff --git a/ng2-components/ng2-alfresco-login/tslint.json b/ng2-components/ng2-alfresco-login/tslint.json
index dde69dd07e..49b228f977 100644
--- a/ng2-components/ng2-alfresco-login/tslint.json
+++ b/ng2-components/ng2-alfresco-login/tslint.json
@@ -113,7 +113,9 @@
             "check-branch",
             "check-decl",
             "check-operator",
-            "check-separator"
+            "check-separator",
+            "check-type",
+            "check-module"
         ]
     }
 }
diff --git a/ng2-components/ng2-alfresco-search/tslint.json b/ng2-components/ng2-alfresco-search/tslint.json
index e0afb6fc9c..ce1f3bcb48 100644
--- a/ng2-components/ng2-alfresco-search/tslint.json
+++ b/ng2-components/ng2-alfresco-search/tslint.json
@@ -110,10 +110,11 @@
     ],
     "whitespace": [
       true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator"
+        "check-branch",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-module"
     ]
   }
 }
diff --git a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
index 2380925626..7f5ef40b50 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
+++ b/ng2-components/ng2-alfresco-upload/src/components/upload-button.component.spec.ts
@@ -34,7 +34,7 @@ describe('AlfrescoUploadButton', () => {
     });
 
     it('should render upload-single-file button as default',
-        injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
             return tcb
                 .createAsync(UploadButtonComponent)
                 .then((fixture) => {
@@ -45,7 +45,7 @@ describe('AlfrescoUploadButton', () => {
         }));
 
     it('should render upload-multiple-file button if multipleFiles is true',
-        injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
             return tcb
                 .createAsync(UploadButtonComponent)
                 .then((fixture) => {
@@ -58,7 +58,7 @@ describe('AlfrescoUploadButton', () => {
         }));
 
     it('should render an uploadFolder button if uploadFolder is true',
-        injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
             return tcb
                 .createAsync(UploadButtonComponent)
                 .then((fixture) => {
@@ -70,7 +70,7 @@ describe('AlfrescoUploadButton', () => {
                 });
         }));
 
-    it('should call onFilesAdded method', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    it('should call onFilesAdded method', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
         return tcb
             .createAsync(UploadButtonComponent)
             .then((fixture) => {
@@ -88,8 +88,8 @@ describe('AlfrescoUploadButton', () => {
             });
     }));
 
-    it('should render dialog box with css class show ',
-        injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+    it('should render dialog box with css class show',
+        injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
             return tcb
                 .createAsync(UploadButtonComponent)
                 .then((fixture) => {
diff --git a/ng2-components/ng2-alfresco-upload/tslint.json b/ng2-components/ng2-alfresco-upload/tslint.json
index dde69dd07e..6d41695316 100644
--- a/ng2-components/ng2-alfresco-upload/tslint.json
+++ b/ng2-components/ng2-alfresco-upload/tslint.json
@@ -111,9 +111,10 @@
         "whitespace": [
             true,
             "check-branch",
-            "check-decl",
             "check-operator",
-            "check-separator"
+            "check-separator",
+            "check-type",
+            "check-module"
         ]
     }
 }
diff --git a/ng2-components/ng2-alfresco-viewer/index.html b/ng2-components/ng2-alfresco-viewer/index.html
index beca5123ac..a213920f4e 100644
--- a/ng2-components/ng2-alfresco-viewer/index.html
+++ b/ng2-components/ng2-alfresco-viewer/index.html
@@ -21,10 +21,7 @@
 
     <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
     <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
-    
-    <script>
-        PDFJS.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.js';
-    </script>
+    <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
 
     <script>
         System.config({
@@ -35,6 +32,9 @@
                 'app': 'dist/main'
             },
             packages: {
+                'pdfjsDistBuildPdf': {
+                    defaultExtension: 'js'
+                },
                 'app': {
                     defaultExtension: 'js'
                 },
@@ -52,6 +52,8 @@
 
 </head>
 <body>
-<ng2-alfresco-viewer><div class="mdl-spinner mdl-js-spinner is-active"></div></ng2-alfresco-viewer>
+<alfresco-viewer [urlFile]="'localTestFile.pdf'">
+    <div class="mdl-spinner mdl-js-spinner is-active"></div>
+</alfresco-viewer>
 </body>
 </html>
diff --git a/ng2-components/ng2-alfresco-viewer/main.ts b/ng2-components/ng2-alfresco-viewer/main.ts
index 9bd38ca8ab..66d3024f3e 100644
--- a/ng2-components/ng2-alfresco-viewer/main.ts
+++ b/ng2-components/ng2-alfresco-viewer/main.ts
@@ -16,6 +16,6 @@
  */
 
 import {bootstrap} from 'angular2/platform/browser';
-import {Ng2AlfrescoViewerComponent} from './ng2-alfresco-viewer';
+import {ViewerComponent} from './ng2-alfresco-viewer';
 
-bootstrap(Ng2AlfrescoViewerComponent);
+bootstrap(ViewerComponent);
diff --git a/ng2-components/ng2-alfresco-viewer/ng2-alfresco-viewer.ts b/ng2-components/ng2-alfresco-viewer/ng2-alfresco-viewer.ts
index 7df699277d..76c8ed123c 100644
--- a/ng2-components/ng2-alfresco-viewer/ng2-alfresco-viewer.ts
+++ b/ng2-components/ng2-alfresco-viewer/ng2-alfresco-viewer.ts
@@ -15,4 +15,4 @@
  * limitations under the License.
  */
 
-export * from './src/ng2-alfresco-viewer.component';
+export * from './src/viewer.component';
diff --git a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.css
deleted file mode 100644
index e94834d452..0000000000
--- a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.button-container {
-    padding: 0 40px;
-}
-
-.page-content {
-    background: #3E3E3E;
-}
diff --git a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.ts
deleted file mode 100644
index 6edb0aa754..0000000000
--- a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component } from 'angular2/core';
-
-declare let PDFJS: any;
-declare let __moduleName:string;
-
-@Component({
-    moduleId: __moduleName,
-    selector: 'ng2-alfresco-viewer',
-    templateUrl: './ng2-alfresco-viewer.component.html',
-    styleUrls: ['./ng2-alfresco-viewer.component.css']
-})
-export class Ng2AlfrescoViewerComponent {
-
-    nameFile:String;
-
-    constructor() {
-        this.nameFile = 'localTestFile.pdf';
-
-        PDFJS.getDocument('../localTestFile.pdf').then(function getPdfHelloWorld(pdf) {
-            //
-            // Fetch the first page
-            //
-            pdf.getPage(1).then(function (page) {
-                let scale = 1.5;
-                let viewport = page.getViewport(scale);
-
-                //
-                // Prepare canvas using PDF page dimensions
-                //
-                let canvas:any = document.getElementById('the-canvas');
-                if (canvas) {
-                    let context = canvas.getContext('2d');
-                    canvas.height = viewport.height;
-                    canvas.width = viewport.width;
-
-                    //
-                    // Render PDF page into canvas context
-                    //
-                    let renderContext = {
-                        canvasContext: context,
-                        viewport: viewport
-                    };
-                    page.render(renderContext);
-                }
-            });
-        });
-        console.log('../contructor');
-    }
-
-}
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.css b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
new file mode 100644
index 0000000000..3eabf09815
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.css
@@ -0,0 +1,31 @@
+.button-container {
+    padding: 0 40px;
+}
+
+.page-content {
+    background: #3E3E3E;
+}
+
+.previous-page-button {
+    top: 50%;
+    left: 7%;
+    position: fixed;
+}
+
+.next-page-button {
+    top: 50%;
+    right: 7%;
+    position: fixed;
+}
+
+.left {
+    float: left;
+}
+
+#viewer-toolbar-pagination {
+    margin-left: 25%;
+}
+
+#viewer-pagenumber-input {
+    width: 30px;
+}
diff --git a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.html b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
similarity index 59%
rename from ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.html
rename to ng2-components/ng2-alfresco-viewer/src/viewer.component.html
index f71e356de0..eff57776b3 100644
--- a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.html
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.html
@@ -7,13 +7,32 @@
 
                 <!-- File Title -->
                 <span class="mdl-layout-title">{{nameFile}}</span>
+
+                <!-- pagination toolbar start -->
+                <div id="viewer-toolbar-pagination">
+                    <div id="viewer-previouspage-button" class="left" (click)="previousPage()">
+                        <i class="icon material-icons">keyboard_arrow_left</i>
+                    </div>
+
+                    <input id="viewer-pagenumber-input"  #page
+                           (keyup.enter)="inputPage(page.value)" class="left" type="text" pattern="-?[0-9]*(\.[0-9]+)?" value="{{displayPage}}">
+                    <span id="viewer-total-pages"  class="left">/ {{totalPages}}</span>
+
+                    <div id="viewer-nextpage-button" (click)="nextPage()"  class="left">
+                        <i class="icon material-icons" >keyboard_arrow_right</i>
+                    </div>
+                </div>
+                <!-- pagination toolbar end -->
+
+                <span class="vertical-divider"></span>
+
                 <div class="mdl-layout-spacer"></div>
 
                 <!-- Start Navigation -->
                 <nav class="mdl-navigation">
                     <div class="button-container">
                         <button
-                            class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
+                            class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored" (click)="cazzo()">
                             <i id="tt2" class="icon material-icons">print</i>
                         </button>
                     </div>
@@ -21,14 +40,14 @@
                     <div class="button-container">
                         <button
                             class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
-                            <i id="tt3" class="icon material-icons">cloud_upload</i>
+                            <i id="cloud-upload" class="icon material-icons">cloud_upload</i>
                         </button>
                     </div>
 
                     <div class="button-container">
                         <button
                             class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
-                            <i id="tt4" class="icon material-icons">share</i>
+                            <i id="share" class="icon material-icons">share</i>
                         </button>
                     </div>
 
@@ -56,7 +75,8 @@
 
                 <div class="mdl-grid">
                     <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
-                    <div class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
+                    <div
+                        class="mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--8-col">
 
                         <!-- Start Pdf Canvas -->
                         <div id="canvas-container">
@@ -64,6 +84,22 @@
                         </div>
                         <!-- End Pdf Canvas -->
 
+                        <div class="previous-page-button">
+                            <button
+                                class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
+                                (click)="previousPage()">
+                                <i class="icon material-icons">keyboard_arrow_left</i>
+                            </button>
+                        </div>
+
+                        <div class="next-page-button">
+                            <button
+                                class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored"
+                                (click)="nextPage()">
+                                <i class="icon material-icons">keyboard_arrow_right</i>
+                            </button>
+                        </div>
+
                     </div>
                 </div>
                 <footer class="mdl-mini-footer">
diff --git a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.spec.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
similarity index 60%
rename from ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.spec.ts
rename to ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
index e075db50ea..6e455ba975 100644
--- a/ng2-components/ng2-alfresco-viewer/src/ng2-alfresco-viewer.component.spec.ts
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.spec.ts
@@ -17,18 +17,18 @@
 
 import {describe, expect, it, injectAsync, TestComponentBuilder, setBaseTestProviders} from 'angular2/testing';
 import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from 'angular2/platform/testing/browser';
-import {Ng2AlfrescoViewerComponent} from '../src/ng2-alfresco-viewer.component';
+import {ViewerComponent} from '../src/viewer.component';
 
 describe('Basic Example test ng2-alfresco-viewer', () => {
-  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
+    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
 
-  it('Test hello world', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-    return tcb
-      .createAsync(Ng2AlfrescoViewerComponent)
-      .then((fixture) => {
-        let element = fixture.nativeElement;
-        expect(element.querySelector('h1')).toBeDefined();
-        expect(element.getElementsByTagName('h1')[0].innerHTML).toEqual('ng2-alfresco-viewer');
-      });
-  }));
+    it('Test hello world', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+        return tcb
+            .createAsync(ViewerComponent)
+            .then((fixture) => {
+                let element = fixture.nativeElement;
+                expect(element.querySelector('h1')).toBeDefined();
+                expect(element.getElementsByTagName('h1')[0].innerHTML).toEqual('ng2-alfresco-viewer');
+            });
+    }));
 });
diff --git a/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
new file mode 100644
index 0000000000..3df07a4114
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/src/viewer.component.ts
@@ -0,0 +1,108 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input } from 'angular2/core';
+
+declare let PDFJS: any;
+declare let __moduleName: string;
+
+@Component({
+    moduleId: __moduleName,
+    selector: 'alfresco-viewer',
+    templateUrl: './viewer.component.html',
+    styleUrls: ['./viewer.component.css']
+})
+export class ViewerComponent {
+
+    @Input()
+    urlFile: string;
+
+    nameFile: string;
+
+    currentPdf: any;
+    currentPage: number;
+    displayPage: number;
+    totalPages: number;
+
+    ngOnInit() {
+        console.log('A.urlFile ' + this.urlFile);
+
+        this.urlFile = this.urlFile ? this.urlFile : 'localTestFile.pdf';
+        this.nameFile = PDFJS.getFilenameFromUrl(this.loadFile);
+
+        PDFJS.getDocument(this.urlFile).then((pdf) => {
+            this.currentPdf = pdf;
+            this.totalPages = pdf.numPages;
+            this.currentPage = 1;
+            this.displayPage = 1;
+            this.loadPage(this.currentPdf, this.currentPage);
+        });
+    }
+
+    loadPage(pdf: any, numberPage: number) {
+        pdf.getPage(numberPage).then((page) => {
+
+            console.log(page.numPages);
+
+            let scale = 1.5;
+            let viewport = page.getViewport(scale);
+
+            let canvas: any = document.getElementById('the-canvas');
+
+            if (canvas) {
+                let context = canvas.getContext('2d');
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+
+                // Render PDF page into canvas context
+                let renderContext = {
+                    canvasContext: context,
+                    viewport: viewport
+                };
+
+                page.render(renderContext);
+            }
+        });
+    }
+
+    previousPage() {
+        if (this.currentPage > 1) {
+            this.currentPage--;
+            this.displayPage = this.currentPage;
+            this.loadPage(this.currentPdf, this.currentPage);
+        }
+    }
+
+    nextPage() {
+        if (this.currentPage < this.totalPages) {
+            this.currentPage++;
+            this.displayPage = this.currentPage;
+            this.loadPage(this.currentPdf, this.currentPage);
+        }
+    }
+
+    inputPage(page: any) {
+        let pageInput = parseInt(page, 10);
+
+        if (!isNaN(pageInput) && pageInput > 0 && pageInput <= this.totalPages) {
+            this.currentPage = pageInput;
+            this.loadPage(this.currentPdf, this.currentPage);
+        } else {
+            this.displayPage = this.currentPage;
+        }
+    }
+}
diff --git a/ng2-components/ng2-alfresco-viewer/tslint.json b/ng2-components/ng2-alfresco-viewer/tslint.json
index 639a8a1948..074d35893b 100644
--- a/ng2-components/ng2-alfresco-viewer/tslint.json
+++ b/ng2-components/ng2-alfresco-viewer/tslint.json
@@ -113,10 +113,11 @@
     ],
     "whitespace": [
       true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator"
+        "check-branch",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-module"
     ]
   }
 }