Simple 'item click' event

demo-shell-ng2/app/components/document-list.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, Input} from "angular2/core";
+import {Component, OnInit, Input, Output, EventEmitter} from "angular2/core";
 import {AlfrescoService} from "./alfresco.service";
 import {FolderEntity} from "./core/entities/folder.entity";
 import {DocumentEntity} from "./core/entities/document.entity";
@@ -79,6 +79,8 @@ export class DocumentList implements OnInit {
     // example: <alfresco-document-list #list [downloads]="false"></alfresco-document-list>
     @Input() downloads: boolean = true;
 
+    @Output() itemClick: EventEmitter<any> = new EventEmitter();
+
     rootFolder = {
         name: 'Document Library',
         path: 'swsdp/documentLibrary'
@@ -137,6 +139,10 @@ export class DocumentList implements OnInit {
             $event.preventDefault();
         }
 
+        this.itemClick.emit({
+            value: item
+        });
+
         if (this.navigate && item) {
             if (item.isFolder) {
                 var path = this.getItemPath(item);

demo-shell-ng2/app/components/home.view.ts

@@ -13,13 +13,20 @@ import {DocumentList} from "./document-list.component";
                         <li><label><input type="checkbox" [(ngModel)]="navigation"> Navigation</label></li>
                         <li><label><input type="checkbox" [(ngModel)]="downloads"> Downloads</label></li>
                     </ul>
+                    <hr>
+                    <ul class="list-unstyled" style="font-size: 10px">
+                        <li *ngFor="#event of events">
+                            <strong>{{event.name}}</strong>: {{event.value.displayName}}
+                        </li>
+                    </ul>
                 </div>
                 <div class="col-md-10">
                     <alfresco-document-list #list 
                         [thumbnails]="thumbnails"
                         [breadcrumb]="breadcrumb"
                         [navigate]="navigation"
-                        [downloads]="downloads">
+                        [downloads]="downloads"
+                        (itemClick)="onItemClick($event)">
                     </alfresco-document-list>
                 </div>
             </div>
@@ -32,4 +39,14 @@ export class HomeView {
     breadcrumb: boolean = false;
     navigation: boolean = true;
     downloads: boolean = true;
+
+    events: any[] = [];
+
+    onItemClick($event) {
+        console.log($event.value);
+        this.events.push({
+            name: 'Item Clicked',
+            value: $event.value
+        });
+    }
 }