From 87b479e7209d72a1765297ab0c2d92bf6f80b70a Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Wed, 19 Apr 2017 15:41:47 +0100
Subject: [PATCH] datatable improvements (#1822)

- move ngSwitch outside of the ngFor directive (to avoid issues)
- improved template maintainance (without ngFor template hack)
- readme updates to reflect new features
---
 .../app/components/files/files.component.html | 11 +++-
 .../ng2-alfresco-datatable/README.md          | 62 ++++++++++++++++++-
 .../datatable/datatable.component.html        | 43 +++++++------
 3 files changed, 94 insertions(+), 22 deletions(-)

diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index 5df948d19f..1a30ea81f9 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -27,12 +27,21 @@
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         key="name"
                         class="full-width ellipsis-cell">
-                    <!-- Example of using custom column template -->
+
+                    <!-- Example #1: using custom template with implicit access to data context -->
                     <!--
                     <template let-entry="$implicit">
                         <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
                     </template>
                     -->
+
+                    <!-- Example #2: using custom template with value access -->
+                    <!--
+                    <template let-value="value">
+                        <span>Hi! {{value}}</span>
+                    </template>
+                    -->
+
                 </data-column>
                 <data-column
                     title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
diff --git a/ng2-components/ng2-alfresco-datatable/README.md b/ng2-components/ng2-alfresco-datatable/README.md
index 1233c10340..e220785767 100644
--- a/ng2-components/ng2-alfresco-datatable/README.md
+++ b/ng2-components/ng2-alfresco-datatable/README.md
@@ -190,8 +190,20 @@ export class DataTableDemo {
         this.data = new ObjectDataTableAdapter(
             // data
             [
-                {id: 1, name: 'Name 1', createdBy : { name: 'user'}, createdOn: 123, icon: 'http://example.com/img.png'},
-                {id: 2, name: 'Name 2', createdBy : { name: 'user 2'}, createdOn: 123, icon: 'http://example.com/img.png'}
+                {
+                    id: 1, 
+                    name: 'Name 1', 
+                    createdBy : { name: 'user'}, 
+                    createdOn: 123, 
+                    icon: 'http://example.com/img.png'
+                },
+                {
+                    id: 2, 
+                    name: 'Name 2', 
+                    createdBy : { name: 'user 2'}, 
+                    createdOn: 123, 
+                    icon: 'http://example.com/img.png'
+                }
             ]
         );
     }
@@ -295,6 +307,52 @@ onRowClick(event) {
 </alfresco-datatable>
 ```
 
+#### Column Templates
+
+It is possible assigning a custom column template like the following:
+
+```html
+<alfresco-datatable ...>
+    <data-columns>
+        <data-column title="Version" key="properties.cm:versionLabel">
+            <template let-value="value">
+                <span>V. {{value}}</span>
+            </template>
+        </data-column>
+    </data-columns>
+</alfresco-datatable>
+```
+
+Example above shows access to the underlying cell value by binding `value` property to the underlying context `value`:
+
+```html
+<template let-value="value">
+```
+
+Alternatively you can get access to the entire data context using the following syntax:
+
+```html
+<template let-entry="$implicit">
+```
+
+That means you are going to create local variable `entry` that is bound to the data context via Angular's special `$implicit` keyword.
+
+```html
+<template let-entry="$implicit">
+    <span>V. {{entry.data.getValue(entry.row, entry.col)}}</span>
+</template>
+```
+
+In the second case `entry` variable is holding a reference to the following data context:
+
+```ts
+{
+    data: DataTableAdapter,
+    row: DataRow,
+    col: DataColumn
+}
+```
+
 #### rowClick event
 
 _This event is emitted when user clicks the row._
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index 0fe2b29eb0..db3f470479 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -53,33 +53,38 @@
         <td *ngIf="multiselect">
             <md-checkbox [(ngModel)]="row.isSelected"></md-checkbox>
         </td>
-        <td *ngFor="let col of data.getColumns()" [ngSwitch]="col.type"
+        <td *ngFor="let col of data.getColumns()"
             class="mdl-data-table__cell--non-numeric non-selectable data-cell {{col.cssClass}}"
             (click)="onRowClick(row, $event)"
             (dblclick)="onRowDblClick(row, $event)"
             [context-menu]="getContextMenuActions(row, col)"
             [context-menu-enabled]="contextMenu">
             <div *ngIf="!col.template" class="cell-container">
-                <div *ngSwitchCase="'image'" class="cell-value">
-                    <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
-                    <img *ngIf="!isIconValue(row, col)"
-                        class="image-cell"
-                        alt="{{iconAltTextKey(data.getValue(row, col))|translate}}"
-                        src="{{data.getValue(row, col)}}"
-                        (error)="onImageLoadingError($event)">
-                </div>
-                <div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
-                    {{data.getValue(row, col)}}
-                </div>
-                <div *ngSwitchCase="'text'" class="cell-value" [attr.data-automation-id]="'text_' + data.getValue(row, col)">
-                    {{data.getValue(row, col)}}
-                </div>
-                <span *ngSwitchDefault class="cell-value">
-                <!-- empty cell for unknown column type -->
-                </span>
+                <ng-container [ngSwitch]="col.type">
+                    <div *ngSwitchCase="'image'" class="cell-value">
+                        <i *ngIf="isIconValue(row, col)" class="material-icons icon-cell">{{asIconValue(row, col)}}</i>
+                        <img *ngIf="!isIconValue(row, col)"
+                            class="image-cell"
+                            alt="{{iconAltTextKey(data.getValue(row, col))|translate}}"
+                            src="{{data.getValue(row, col)}}"
+                            (error)="onImageLoadingError($event)">
+                    </div>
+                    <div *ngSwitchCase="'date'" class="cell-value" [attr.data-automation-id]="'date_' + data.getValue(row, col)">
+                        {{data.getValue(row, col)}}
+                    </div>
+                    <div *ngSwitchCase="'text'" class="cell-value" [attr.data-automation-id]="'text_' + data.getValue(row, col)">
+                        {{data.getValue(row, col)}}
+                    </div>
+                    <span *ngSwitchDefault class="cell-value">
+                    <!-- empty cell for unknown column type -->
+                    </span>
+                </ng-container>
             </div>
             <div *ngIf="col.template" class="cell-container">
-                <template ngFor [ngForOf]="[{ data: data, row: row, col: col }]" [ngForTemplate]="col.template"></template>
+                <ng-container
+                    [ngTemplateOutlet]="col.template"
+                    [ngOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
+                </ng-container>
             </div>
         </td>