From 9fe62f9d933ea55447ed87d3199ba4272aafde76 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@users.noreply.github.com>
Date: Thu, 29 Jun 2017 11:04:13 -0700
Subject: [PATCH] feat(table): add disconnect to data source (#5382)

* feat(data-table): add disconnect to data source

* testing

* add collectionviewer to disconnect
---
 src/demo-app/data-table/person-data-source.ts |  6 +++++-
 src/lib/core/data-table/data-source.ts        |  1 +
 src/lib/core/data-table/data-table.spec.ts    | 18 +++++++++++++++++-
 src/lib/core/data-table/data-table.ts         |  7 +++++++
 src/lib/sort/sort.spec.ts                     |  1 +
 src/lib/table/table.spec.ts                   |  2 ++
 6 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/data-table/person-data-source.ts b/src/demo-app/data-table/person-data-source.ts
index 0f8d59adf58..99b7604c84f 100644
--- a/src/demo-app/data-table/person-data-source.ts
+++ b/src/demo-app/data-table/person-data-source.ts
@@ -13,7 +13,7 @@ export class PersonDataSource extends DataSource<any> {
 
   connect(): Observable<UserData[]> {
     const displayDataChanges = [
-        this._paginator.page,
+      this._paginator.page,
       this._sort.mdSortChange,
       this._peopleDatabase.dataChange
     ];
@@ -26,6 +26,10 @@ export class PersonDataSource extends DataSource<any> {
     });
   }
 
+  disconnect() {
+    // No-op
+  }
+
   /** Returns a sorted copy of the database data. */
   getSortedData(): UserData[] {
     const data = this._peopleDatabase.data.slice();
diff --git a/src/lib/core/data-table/data-source.ts b/src/lib/core/data-table/data-source.ts
index acd4b59d16a..7420ac7b515 100644
--- a/src/lib/core/data-table/data-source.ts
+++ b/src/lib/core/data-table/data-source.ts
@@ -14,4 +14,5 @@ export interface CollectionViewer {
 
 export abstract class DataSource<T> {
   abstract connect(collectionViewer: CollectionViewer): Observable<T[]>;
+  abstract disconnect(collectionViewer: CollectionViewer): void;
 }
diff --git a/src/lib/core/data-table/data-table.spec.ts b/src/lib/core/data-table/data-table.spec.ts
index 6157273b12e..84144aff1bb 100644
--- a/src/lib/core/data-table/data-table.spec.ts
+++ b/src/lib/core/data-table/data-table.spec.ts
@@ -94,6 +94,13 @@ describe('CdkTable', () => {
     });
   });
 
+  it('should disconnect the data source when table is destroyed', () => {
+    expect(dataSource.isConnected).toBe(true);
+
+    fixture.destroy();
+    expect(dataSource.isConnected).toBe(false);
+  });
+
   it('should not clobber an existing table role', () => {
     fixture = TestBed.createComponent(CustomRoleCdkTableApp);
     fixture.detectChanges();
@@ -301,8 +308,10 @@ describe('CdkTable', () => {
     ]);
 
     // Add a data source that has initialized data. Expect that the table shows this data.
-    component.dataSource = new FakeDataSource();
+    const dynamicDataSource = new FakeDataSource();
+    component.dataSource = dynamicDataSource;
     fixture.detectChanges();
+    expect(dynamicDataSource.isConnected).toBe(true);
 
     let data = component.dataSource.data;
     expect(tableElement).toMatchTableContent([
@@ -315,6 +324,9 @@ describe('CdkTable', () => {
     // Remove the data source and check to make sure the table is empty again.
     component.dataSource = null;
     fixture.detectChanges();
+
+    // Expect that the old data source has been disconnected.
+    expect(dynamicDataSource.isConnected).toBe(false);
     expect(tableElement).toMatchTableContent([
       ['Column A']
     ]);
@@ -454,6 +466,10 @@ class FakeDataSource extends DataSource<TestData> {
     return map.call(combineLatest(streams), ([data]) => data);
   }
 
+  disconnect() {
+    this.isConnected = false;
+  }
+
   addData() {
     const nextIndex = this.data.length + 1;
 
diff --git a/src/lib/core/data-table/data-table.ts b/src/lib/core/data-table/data-table.ts
index 34178aa48c7..828486243ea 100644
--- a/src/lib/core/data-table/data-table.ts
+++ b/src/lib/core/data-table/data-table.ts
@@ -184,6 +184,9 @@ export class CdkTable<T> implements CollectionViewer {
   ngOnDestroy() {
     this._onDestroy.next();
     this._onDestroy.complete();
+    if (this.dataSource) {
+      this.dataSource.disconnect(this);
+    }
   }
 
   ngOnInit() {
@@ -237,6 +240,10 @@ export class CdkTable<T> implements CollectionViewer {
    */
   private _switchDataSource(dataSource: DataSource<T>) {
     this._data = [];
+
+    if (this._dataSource) {
+      this.dataSource.disconnect(this);
+    }
     this._dataSource = dataSource;
 
     if (this._isViewInitialized) {
diff --git a/src/lib/sort/sort.spec.ts b/src/lib/sort/sort.spec.ts
index dadc2fe7422..4222e4afc36 100644
--- a/src/lib/sort/sort.spec.ts
+++ b/src/lib/sort/sort.spec.ts
@@ -203,6 +203,7 @@ class FakeDataSource extends DataSource<any> {
   connect(collectionViewer: CollectionViewer): Observable<any[]> {
     return map.call(collectionViewer.viewChange, () => []);
   }
+  disconnect() {}
 }
 
 @Component({
diff --git a/src/lib/table/table.spec.ts b/src/lib/table/table.spec.ts
index f4fc5f37209..047505062de 100644
--- a/src/lib/table/table.spec.ts
+++ b/src/lib/table/table.spec.ts
@@ -68,6 +68,8 @@ class FakeDataSource extends DataSource<TestData> {
     return this._dataChange;
   }
 
+  disconnect() {}
+
   addData() {
     const nextIndex = this.data.length + 1;