feat(table): add disconnect to data source (#5382)

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

* testing

* add collectionviewer to disconnect

Author: andrewseguin

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();

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;
 }

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;
 

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) {

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({

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;