diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index 81a075c71292..17afd2c39c43 100644 --- a/src/lib/tabs/tab-body.ts +++ b/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 = new EventEmitter(); + /** Event emitted before the centering of the tab begins. */ + @Output() _afterLeavingCenter: EventEmitter = new EventEmitter(); + /** Event emitted when the tab completes its animation towards the center. */ @Output() _onCentered: EventEmitter = new EventEmitter(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. */