[ADF-2589] conditional visibility for DL/DT components (#3223)

* watch data columns and update layout if needed

* update docs

* support DataTable, docs and tests

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { SimpleChange, NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SimpleChange, NO_ERRORS_SCHEMA, QueryList } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { MatCheckboxChange } from '@angular/material';
 import { DataColumn } from '../../data/data-column.model';
 import { DataRow } from '../../data/data-row.model';
@@ -26,6 +26,8 @@ import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
 import { DataTableComponent } from './datatable.component';
 import { setupTestBed } from '../../../testing/setupTestBed';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { DataColumnListComponent } from '../../../data-column/data-column-list.component';
+import { DataColumnComponent } from '../../../data-column/data-column.component';
 
 describe('DataTable', () => {
 
@@ -50,6 +52,23 @@ describe('DataTable', () => {
         fixture.destroy();
     });
 
+    it('should update schema if columns change', fakeAsync(() => {
+
+        dataTable.columnList = new DataColumnListComponent();
+        dataTable.columnList.columns = new QueryList<DataColumnComponent>();
+        dataTable.data = new ObjectDataTableAdapter([], []);
+
+        spyOn(dataTable.data, 'setColumns').and.callThrough();
+
+        dataTable.ngAfterContentInit();
+        dataTable.columnList.columns.reset([new DataColumnComponent()]);
+        dataTable.columnList.columns.notifyOnChanges();
+
+        tick(100);
+
+        expect(dataTable.data.setColumns).toHaveBeenCalled();
+    }));
+
     it('should use the cardview style if cardview is true', () => {
         let newData = new ObjectDataTableAdapter(
             [

lib/core/datatable/components/datatable/datatable.component.ts

@@ -17,7 +17,7 @@
 
 import {
     AfterContentInit, Component, ContentChild, DoCheck, ElementRef, EventEmitter, Input,
-    IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef, ViewEncapsulation
+    IterableDiffers, OnChanges, Output, SimpleChange, SimpleChanges, TemplateRef, ViewEncapsulation, OnDestroy
 } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material';
 import { Subscription } from 'rxjs/Subscription';
@@ -50,7 +50,7 @@ export enum DisplayMode {
     templateUrl: './datatable.component.html',
     encapsulation: ViewEncapsulation.None
 })
-export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck {
+export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck, OnDestroy {
 
     @ContentChild(DataColumnListComponent)
     columnList: DataColumnListComponent;
@@ -159,6 +159,7 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     private differ: any;
     private rowMenuCache: object = {};
 
+    private subscriptions: Subscription[] = [];
     private singleClickStreamSub: Subscription;
     private multiClickStreamSub: Subscription;
 
@@ -172,6 +173,13 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     }
 
     ngAfterContentInit() {
+        if (this.columnList) {
+            this.subscriptions.push(
+                this.columnList.columns.changes.subscribe(() => {
+                    this.setTableSchema();
+                })
+            );
+        }
         this.setTableSchema();
     }
 
@@ -258,9 +266,11 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
     private unsubscribeClickStream() {
         if (this.singleClickStreamSub) {
             this.singleClickStreamSub.unsubscribe();
+            this.singleClickStreamSub = null;
         }
         if (this.multiClickStreamSub) {
             this.multiClickStreamSub.unsubscribe();
+            this.multiClickStreamSub = null;
         }
     }
 
@@ -590,4 +600,10 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         });
         this.elementRef.nativeElement.dispatchEvent(domEvent);
     }
+
+    ngOnDestroy() {
+        this.unsubscribeClickStream();
+        this.subscriptions.forEach(s => s.unsubscribe());
+        this.subscriptions = [];
+    }
 }