fix(tabs): hide tab body content after leaving the tab's view area (#8827)

src/lib/tabs/tab-body.ts

@@ -66,6 +66,8 @@ export type MatTabBodyOriginState = 'left' | 'right';
 export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
   /** A subscription to events for when the tab body begins centering. */
   private _centeringSub: Subscription;
+  /** A subscription to events for when the tab body finishes leaving from center position. */
+  private _leavingSub: Subscription;
 
   constructor(
     _componentFactoryResolver: ComponentFactoryResolver,
@@ -84,10 +86,12 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
         if (!this.hasAttached()) {
           this.attach(this._host._content);
         }
-      } else {
-        this.detach();
       }
     });
+
+    this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {
+      this.detach();
+    });
   }
 
   /** Clean up centering subscription. */
@@ -95,6 +99,10 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
     if (this._centeringSub && !this._centeringSub.closed) {
       this._centeringSub.unsubscribe();
     }
+
+    if (this._leavingSub && !this._leavingSub.closed) {
+      this._leavingSub.unsubscribe();
+    }
   }
 }
 
@@ -139,6 +147,9 @@ export class MatTabBody implements OnInit {
   /** Event emitted before the centering of the tab begins. */
   @Output() _beforeCentering: EventEmitter<boolean> = new EventEmitter<boolean>();
 
+  /** Event emitted before the centering of the tab begins. */
+  @Output() _afterLeavingCenter: EventEmitter<boolean> = new EventEmitter<boolean>();
+
   /** Event emitted when the tab completes its animation towards the center. */
   @Output() _onCentered: EventEmitter<void> = new EventEmitter<void>(true);
 
@@ -198,6 +209,10 @@ export class MatTabBody implements OnInit {
     if (this._isCenterPosition(e.toState) && this._isCenterPosition(this._position)) {
       this._onCentered.emit();
     }
+
+    if (this._isCenterPosition(e.fromState) && !this._isCenterPosition(this._position)) {
+      this._afterLeavingCenter.emit();
+    }
   }
 
   /** The text direction of the containing app. */