#1750 add ngOnchange on data input (#1751)

* #1750 add ngOnchange on data input

* Update datatable.component.ts

ng2-components/ng2-alfresco-datatable/README.md

@@ -162,16 +162,53 @@ platformBrowserDynamic().bootstrapModule(AppModule);
 
 You can also use HTML-based schema declaration like shown below:
 
-```html
+```ts
-<alfresco-datatable [data]="data" [multiselect]="multiselect">
+import { NgModule, Component } from '@angular/core';
-    <data-columns>
+import { BrowserModule } from '@angular/platform-browser';
-        <data-column type="image" key="icon" [sortable]="false"></data-column>
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-        <data-column key="id" title="Id"></data-column>
+import { CoreModule } from 'ng2-alfresco-core';
-        <data-column key="createdOn" title="Created"></data-column>
+import { DataTableModule, ObjectDataTableAdapter }  from 'ng2-alfresco-datatable';
-        <data-column key="name" title="Name" class="full-width name-column"></data-column>
+
-        <data-column key="createdBy.name" title="Created By"></data-column>
+@Component({
-    </data-columns>
+    selector: 'alfresco-app-demo',
-</alfresco-datatable>
+    template: `
+        <alfresco-datatable [data]="data">
+            <data-columns>
+                <data-column key="icon" type="image" [sortable]="false"></data-column>
+                <data-column key="id" title="Id"></data-column>
+                <data-column key="createdOn" title="Created"></data-column>
+                <data-column key="name" title="Name" class="full-width name-column"></data-column>
+                <data-column key="createdBy.name" title="Created By"></data-column>
+            </data-columns>
+        </alfresco-datatable>
+    `
+})
+export class DataTableDemo {
+    data: ObjectDataTableAdapter;
+
+    constructor() {
+        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'}
+            ]
+        );
+    }
+}
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        CoreModule.forRoot(),
+        DataTableModule.forRoot()
+    ],
+    declarations: [DataTableDemo],
+    bootstrap: [DataTableDemo]
+})
+export class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
 ```
 
 ### DataTable Properties

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.spec.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 
+import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { CoreModule } from 'ng2-alfresco-core';
 import { DataTableComponent } from './datatable.component';
@@ -55,7 +56,8 @@ describe('DataTable', () => {
         // dataTable = new DataTableComponent();
 
         eventMock = {
-            preventDefault: function () {}
+            preventDefault: function () {
+            }
         };
     });
 
@@ -95,6 +97,15 @@ describe('DataTable', () => {
         expect(table.data).toEqual(jasmine.any(ObjectDataTableAdapter));
     });
 
+    it('should load data table on onChange', () => {
+        let table = new DataTableComponent(null);
+        let data = new ObjectDataTableAdapter([], []);
+
+        expect(table.data).toBeUndefined();
+        table.ngOnChanges({'data': new SimpleChange('123', data)});
+        expect(table.data).toEqual(data);
+    });
+
     it('should initialize with custom data', () => {
         let data = new ObjectDataTableAdapter([], []);
         dataTable.data = data;

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -15,7 +15,19 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter, ElementRef, TemplateRef, AfterContentInit, ContentChild, Optional } from '@angular/core';
+import {
+    Component,
+    OnChanges,
+    SimpleChanges,
+    Input,
+    Output,
+    EventEmitter,
+    ElementRef,
+    TemplateRef,
+    AfterContentInit,
+    ContentChild,
+    Optional
+} from '@angular/core';
 import { DataTableAdapter, DataRow, DataColumn, DataSorting, DataRowEvent, ObjectDataTableAdapter } from '../../data/index';
 import { DataCellEvent } from './data-cell.event';
 import { DataRowActionEvent } from './data-row-action.event';
@@ -29,7 +41,7 @@ declare var componentHandler;
     styleUrls: ['./datatable.component.css'],
     templateUrl: './datatable.component.html'
 })
-export class DataTableComponent implements AfterContentInit {
+export class DataTableComponent implements AfterContentInit, OnChanges {
 
     @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
 
@@ -80,6 +92,17 @@ export class DataTableComponent implements AfterContentInit {
     }
 
     ngAfterContentInit() {
+        this.loadTable();
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['data'] && changes['data'].currentValue) {
+            this.loadTable();
+            return;
+        }
+    }
+
+    loadTable() {
         let schema: DataColumn[] = [];
 
         if (this.columnList && this.columnList.columns) {
@@ -88,16 +111,22 @@ export class DataTableComponent implements AfterContentInit {
 
         if (!this.data) {
             this.data = new ObjectDataTableAdapter([], schema);
-        } else if (schema && schema.length > 0) {
+        } else {
-            this.data.setColumns(schema);
+            this.setHtmlColumnConfigurationOnObjectAdapter(schema);
         }
 
-         // workaround for MDL issues with dynamic components
+        // workaround for MDL issues with dynamic components
         if (componentHandler) {
             componentHandler.upgradeAllRegistered();
         }
     }
 
+    private setHtmlColumnConfigurationOnObjectAdapter(schema: DataColumn[]) {
+        if (schema && schema.length > 0) {
+            this.data.setColumns(schema);
+        }
+    }
+
     onRowClick(row: DataRow, e?: Event) {
         if (e) {
             e.preventDefault();