fix(tabs): custom QueryList not being cleaned up (#17548)

We create a custom `QueryList` called `_tabs` to capture only the tabs that belong to the current tab group, however since it's something that we create manually. it won't be cleaned up automatically. These changes ensure that it's cleaned up.

Author: crisbeto

src/material-experimental/mdc-tabs/tab-group.spec.ts

@@ -280,6 +280,18 @@ describe('MatTabGroup', () => {
         .toHaveBeenCalledWith(jasmine.objectContaining({index: 0}));
     });
 
+    it('should clean up the tabs QueryList on destroy', () => {
+      const component: MatTabGroup =
+        fixture.debugElement.query(By.css('mat-tab-group'))!.componentInstance;
+      const spy = jasmine.createSpy('complete spy');
+      const subscription = component._tabs.changes.subscribe({complete: spy});
+
+      fixture.destroy();
+
+      expect(spy).toHaveBeenCalled();
+      subscription.unsubscribe();
+    });
+
   });
 
   describe('aria labelling', () => {

src/material/tabs/tab-group.spec.ts

@@ -279,6 +279,18 @@ describe('MatTabGroup', () => {
         .toHaveBeenCalledWith(jasmine.objectContaining({index: 0}));
     });
 
+    it('should clean up the tabs QueryList on destroy', () => {
+      const component: MatTabGroup =
+        fixture.debugElement.query(By.css('mat-tab-group'))!.componentInstance;
+      const spy = jasmine.createSpy('complete spy');
+      const subscription = component._tabs.changes.subscribe({complete: spy});
+
+      fixture.destroy();
+
+      expect(spy).toHaveBeenCalled();
+      subscription.unsubscribe();
+    });
+
   });
 
   describe('aria labelling', () => {

src/material/tabs/tab-group.ts

@@ -279,6 +279,7 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
   }
 
   ngOnDestroy() {
+    this._tabs.destroy();
     this._tabsSubscription.unsubscribe();
     this._tabLabelSubscription.unsubscribe();
   }