diff --git a/demo-shell-ng2/app/components/search/search.component.html b/demo-shell-ng2/app/components/search/search.component.html
index 8adba65974..93568e6b8d 100644
--- a/demo-shell-ng2/app/components/search/search.component.html
+++ b/demo-shell-ng2/app/components/search/search.component.html
@@ -1,4 +1,8 @@
-<div>
+<div class="search-results-container">
     <h1>Search results</h1>
-    <alfresco-search></alfresco-search>
-</div>
\ No newline at end of file
+    <alfresco-search (preview)="onFileClicked($event)"></alfresco-search>
+</div>
+
+<alfresco-viewer [(showViewer)]="previewActive" [urlFile]="previewContentUrl" [fileName]="previewName" [mimeType]="previewMimeType" [overlayMode]="true">
+    <div class="mdl-spinner mdl-js-spinner is-active"></div>
+</alfresco-viewer>
diff --git a/demo-shell-ng2/app/components/search/search.component.ts b/demo-shell-ng2/app/components/search/search.component.ts
index 4a8bf72da3..77067b5ff6 100644
--- a/demo-shell-ng2/app/components/search/search.component.ts
+++ b/demo-shell-ng2/app/components/search/search.component.ts
@@ -16,7 +16,9 @@
  */
 
 import { Component } from '@angular/core';
+import { AlfrescoContentService } from 'ng2-alfresco-core';
 import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search';
+import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
 
 declare let __moduleName: string;
 
@@ -25,17 +27,34 @@ declare let __moduleName: string;
     selector: 'search-component',
     templateUrl: './search.component.html',
     styles: [`
-        :host div {
-            padding: 0 20px;
+        :host div.search-results-container {
+            padding: 0 20px 20px 20px;
         }
         :host h1 {
             font-size: 22px;
         }
+        :host tbody tr {
+            cursor: pointer;
+        }
     `],
-    directives: [ ALFRESCO_SEARCH_DIRECTIVES ]
+    directives: [ ALFRESCO_SEARCH_DIRECTIVES, VIEWERCOMPONENT ]
 })
 export class SearchComponent {
-    constructor() {
-        console.log('SearchComponent constructor');
+
+    previewContentUrl: string;
+    previewName: string;
+    previewMimeType: string;
+    previewActive: boolean = false;
+
+    constructor(public contentService: AlfrescoContentService) {
+    }
+
+    onFileClicked(event) {
+        if (event.value.entry.isFile) {
+            this.previewName = event.value.entry.name;
+            this.previewMimeType = event.value.entry.content.mimeType;
+            this.previewContentUrl = this.contentService.getContentUrl(event.value);
+            this.previewActive = true;
+        }
     }
 }
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
index 42797d84a7..622d0678ea 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
@@ -19,7 +19,7 @@
     </thead>
     <tbody>
 
-    <tr *ngFor="let result of results; let idx = index">
+    <tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)">
         <td><img src="{{getMimeTypeIcon(result)}}" /></td>
         <td attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
         <td attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}>
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts
index 8486802bd1..7699fab4cf 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.spec.ts
@@ -109,4 +109,35 @@ describe('AlfrescoSearchComponent', () => {
 
     });
 
+    describe('search result actions', () => {
+
+        it('should emit preview when file item clicked',
+            inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
+                return tcb
+                    .overrideProviders(AlfrescoSearchComponent, [
+                        { provide: AlfrescoSearchService, useClass: SearchServiceMock }
+                    ])
+                    .createAsync(AlfrescoSearchComponent)
+                    .then((fixture) => {
+                        let componentInstance = fixture.componentInstance;
+                        componentInstance.results = [{
+                            entry: {
+                                id: '123',
+                                name: 'MyDoc',
+                                content: {
+                                    mimetype: 'text/plain'
+                                },
+                                isFile: true
+                            }
+                        }];
+                        fixture.detectChanges(componentInstance.results[0]);
+                        componentInstance.preview.subscribe(e => {
+                            expect(e.value).toBe(componentInstance.results[0]);
+                        });
+                        componentInstance.onItemClick();
+
+                    });
+            }));
+    });
+
 });
diff --git a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
index 28ba3a2831..2c81a0ffbc 100644
--- a/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
+++ b/ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, Optional, OnChanges, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output, Optional, OnChanges, OnInit } from '@angular/core';
 import { RouteParams } from '@angular/router-deprecated';
 import { AlfrescoSearchService } from './../services/alfresco-search.service';
 import { AlfrescoThumbnailService } from './../services/alfresco-thumbnail.service';
@@ -38,6 +38,9 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
     @Input()
     searchTerm: string = '';
 
+    @Output()
+    preview: EventEmitter<any> = new EventEmitter();
+
     results: any;
 
     errorMessage;
@@ -100,4 +103,17 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
         }
     }
 
+    onItemClick(node, event?: Event): void {
+        if (event) {
+            event.preventDefault();
+        }
+        if (node && node.entry) {
+            if (node.entry.isFile) {
+                this.preview.emit({
+                    value: node
+                });
+            }
+        }
+    }
+
 }
diff --git a/ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.ts b/ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.ts
index c06f58ca69..2e09bd5b6f 100644
--- a/ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.ts
+++ b/ng2-components/ng2-alfresco-search/src/services/alfresco-search.service.ts
@@ -59,7 +59,6 @@ export class AlfrescoSearchService {
     public getLiveSearchResults(term: string): Observable<any> {
         return Observable.fromPromise(this.getSearchNodesPromise(term))
             .map(res => <any> res)
-            .do(data => console.log('Search data', data)) // eyeball results in the console
             .catch(this.handleError);
     }