Detach tabs hidden tabs from view.

Author: josephperrott

src/lib/tabs/tab-body.ts

@@ -81,19 +81,21 @@ export class MatTabBodyPortal extends _MatTabBodyPortalBaseClass implements OnIn
   ngOnInit(): void {
     if (this._host._isCenterPosition(this._host._position)) {
       this.attach(this._host._content);
-    } else {
-      this._centeringSub = this._host._beforeCentering.subscribe(() => {
-        this.attach(this._host._content);
-        this._centeringSub.unsubscribe();
-      });
     }
+    this._centeringSub = this._host._beforeCentering.subscribe((isCentering: boolean) => {
+      if (isCentering) {
+        if (!this.hasAttached()) {
+          this.attach(this._host._content);
+        }
+      } else {
+        this.detach();
+      }
+    });
   }
 
-  /** Clean up subscription if necessary. */
+  /** Clean up centering subscription. */
   ngOnDestroy(): void {
-    if (this._centeringSub && !this._centeringSub.closed) {
-      this._centeringSub.unsubscribe();
-    }
+    this._centeringSub.unsubscribe();
   }
 }
 
@@ -136,7 +138,7 @@ export class MatTabBody implements OnInit {
   @Output() _onCentering: EventEmitter<number> = new EventEmitter<number>();
 
   /** Event emitted before the centering of the tab begins. */
-  @Output() _beforeCentering: EventEmitter<number> = new EventEmitter<number>();
+  @Output() _beforeCentering: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   /** Event emitted when the tab completes its animation towards the center. */
   @Output() _onCentered: EventEmitter<void> = new EventEmitter<void>(true);
@@ -185,8 +187,9 @@ export class MatTabBody implements OnInit {
   }
 
   _onTranslateTabStarted(e: AnimationEvent): void {
-    if (this._isCenterPosition(e.toState)) {
-      this._beforeCentering.emit();
+    const isCentering = this._isCenterPosition(e.toState);
+    this._beforeCentering.emit(isCentering);
+    if (isCentering) {
       this._onCentering.emit(this._elementRef.nativeElement.clientHeight);
     }
   }