#1750 add ngOnchange on data input (#1751)

* #1750 add ngOnchange on data input

* Update datatable.component.ts

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) {
-            this.data.setColumns(schema);
+        } else {
+            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();