Move tabs to smart portal directive.

Author: josephperrott

src/lib/tabs/public_api.ts

@@ -9,7 +9,12 @@
 export * from './tabs-module';
 export * from './tab-group';
 export {MdInkBar} from './ink-bar';
-export {MdTabBody, MdTabBodyOriginState, MdTabBodyPositionState} from './tab-body';
+export {
+  MdTabBody,
+  MdTabBodyOriginState,
+  MdTabBodyPositionState,
+  MdTabBodyPortal
+} from './tab-body';
 export {MdTabHeader, ScrollDirection} from './tab-header';
 export {MdTabLabelWrapper} from './tab-label-wrapper';
 export {MdTab} from './tab';

src/lib/tabs/tab-body.html

@@ -1,6 +1,7 @@
 <div class="mat-tab-body-content" #content
+     [style.display]="_portalHost?.visible ? 'block' : 'none'"
      [@translateTab]="_position"
      (@translateTab.start)="_onTranslateTabStarted($event)"
      (@translateTab.done)="_onTranslateTabComplete($event)">
-  <ng-template cdkPortalHost></ng-template>
+  <ng-template matTabBodyHost></ng-template>
 </div>

src/lib/tabs/tab-body.spec.ts

@@ -2,10 +2,10 @@ import {Direction, Directionality} from '@angular/cdk/bidi';
 import {PortalModule, TemplatePortal} from '@angular/cdk/portal';
 import {CommonModule} from '@angular/common';
 import {Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
-import {async, ComponentFixture, fakeAsync, flushMicrotasks, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, fakeAsync, tick, TestBed} from '@angular/core/testing';
 import {MdRippleModule} from '@angular/material/core';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {MdTabBody} from './tab-body';
+import {MdTabBody, MdTabBodyPortal} from './tab-body';
 
 
 describe('MdTabBody', () => {
@@ -17,6 +17,7 @@ describe('MdTabBody', () => {
       imports: [CommonModule, PortalModule, MdRippleModule, NoopAnimationsModule],
       declarations: [
         MdTabBody,
+        MdTabBodyPortal,
         SimpleTabBodyApp,
       ],
       providers: [
@@ -153,19 +154,16 @@ describe('MdTabBody', () => {
       fixture = TestBed.createComponent(SimpleTabBodyApp);
     }));
 
-    it('should attach the content when centered and detach when not', fakeAsync(() => {
+    it('should attach when first made visible', fakeAsync(() => {
       fixture.componentInstance.position = 1;
       fixture.detectChanges();
+      tick(1000);
       expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false);
 
       fixture.componentInstance.position = 0;
       fixture.detectChanges();
+      tick(1000);
       expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(true);
-
-      fixture.componentInstance.position = 1;
-      fixture.detectChanges();
-      flushMicrotasks(); // Finish animation and let it detach in animation done handler
-      expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false);
     }));
   });
 

src/lib/tabs/tab-body.ts

@@ -14,10 +14,12 @@ import {
   EventEmitter,
   OnInit,
   ElementRef,
+  Directive,
   Optional,
-  AfterViewChecked,
   ViewEncapsulation,
   ChangeDetectionStrategy,
+  ComponentFactoryResolver,
+  ViewContainerRef,
 } from '@angular/core';
 import {
   trigger,
@@ -29,7 +31,10 @@ import {
 } from '@angular/animations';
 import {TemplatePortal, PortalHostDirective} from '@angular/cdk/portal';
 import {Directionality, Direction} from '@angular/cdk/bidi';
+import {Subscription} from 'rxjs/Subscription';
 
+/** Workaround for https://github.com/angular/angular/issues/17849 */
+export const _MdTabBodyPortalBaseClass = PortalHostDirective;
 
 /**
  * These position states are used internally as animation states for the tab body. Setting the
@@ -52,6 +57,53 @@ export type MdTabBodyPositionState =
  */
 export type MdTabBodyOriginState = 'left' | 'right';
 
+/**
+ * The portal host directive for the contents of the tab.
+ * @docs-private
+ */
+@Directive({
+  selector: '[matTabBodyHost]'
+})
+export class MdTabBodyPortal extends _MdTabBodyPortalBaseClass implements OnInit {
+  /** Whether the tab body should be visible. */
+  visible = false;
+  /** A subscription to events for when the tab body begins centering. */
+  centeringSub: Subscription;
+  /** A subscription to events for when the tab body completes leaving from center. */
+  leavingCenterSub: Subscription;
+
+  constructor(
+    _componentFactoryResolver: ComponentFactoryResolver,
+    _viewContainerRef: ViewContainerRef,
+    private host: MdTabBody) {
+      super(_componentFactoryResolver, _viewContainerRef);
+  }
+
+  /** Set up subscriptions for changing visibility and set initial visibility. */
+  ngOnInit(): void {
+    this.centeringSub = this.host.onCentering.subscribe(() => this.setVisibility(true));
+    this.leavingCenterSub = this.host._afterLeavingCenter.subscribe(
+      () => this.setVisibility(false));
+    if (this.host._isCenterPosition(this.host._position)) {
+      this.setVisibility(true);
+    }
+  }
+
+  /** Clean up subscriptions. */
+  ngOnDestroy(): void {
+    this.leavingCenterSub.unsubscribe();
+    this.centeringSub.unsubscribe();
+  }
+
+  /** Set the visiblity of the tab body content, attaching the content if necessary. */
+  setVisibility(visible: boolean): void {
+    if (visible && !this.hasAttached()) {
+      this.attach(this.host._content);
+    }
+    this.visible = visible;
+  }
+}
+
 /**
  * Wrapper for the contents of a tab.
  * @docs-private
@@ -88,13 +140,16 @@ export type MdTabBodyOriginState = 'left' | 'right';
     ])
   ]
 })
-export class MdTabBody implements OnInit, AfterViewChecked {
+export class MdTabBody implements OnInit {
   /** The portal host inside of this container into which the tab body content will be loaded. */
-  @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
+  @ViewChild(MdTabBodyPortal) _portalHost: MdTabBodyPortal;
 
   /** Event emitted when the tab begins to animate towards the center as the active tab. */
   @Output() onCentering: EventEmitter<number> = new EventEmitter<number>();
 
+  /** Event emitted when the tab completes its animation away from the center. */
+  @Output() _afterLeavingCenter: EventEmitter<void> = new EventEmitter<void>();
+
   /** Event emitted when the tab completes its animation towards the center. */
   @Output() onCentered: EventEmitter<void> = new EventEmitter<void>(true);
 
@@ -141,26 +196,16 @@ export class MdTabBody implements OnInit, AfterViewChecked {
     }
   }
 
-  /**
-   * After the view has been set, check if the tab content is set to the center and attach the
-   * content if it is not already attached.
-   */
-  ngAfterViewChecked() {
-    if (this._isCenterPosition(this._position) && !this._portalHost.hasAttached()) {
-      this._portalHost.attach(this._content);
-    }
-  }
-
-  _onTranslateTabStarted(e: AnimationEvent) {
+  _onTranslateTabStarted(e: AnimationEvent): void {
     if (this._isCenterPosition(e.toState)) {
       this.onCentering.emit(this._elementRef.nativeElement.clientHeight);
     }
   }
 
-  _onTranslateTabComplete(e: AnimationEvent) {
-    // If the end state is that the tab is not centered, then detach the content.
+  _onTranslateTabComplete(e: AnimationEvent): void {
+    // If the end state is that the tab is not centered, emit an event.
     if (!this._isCenterPosition(e.toState) && !this._isCenterPosition(this._position)) {
-      this._portalHost.detach();
+      this._afterLeavingCenter.emit();
     }
 
     // If the transition to the center is complete, emit an event.
@@ -175,7 +220,7 @@ export class MdTabBody implements OnInit, AfterViewChecked {
   }
 
   /** Whether the provided position state is considered center, regardless of origin. */
-  private _isCenterPosition(position: MdTabBodyPositionState|string): boolean {
+  _isCenterPosition(position: MdTabBodyPositionState|string): boolean {
     return position == 'center' ||
         position == 'left-origin-center' ||
         position == 'right-origin-center';

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

@@ -322,23 +322,25 @@ describe('MdTabGroup', () => {
           fixture.debugElement.query(By.directive(MdTabGroup)).componentInstance as MdTabGroup;
     });
 
-    it('should support a tab-group with the simple api', () => {
+    it('should support a tab-group with the simple api', async(() => {
       expect(getSelectedLabel(fixture).textContent).toMatch('Junk food');
       expect(getSelectedContent(fixture).textContent).toMatch('Pizza, fries');
 
       tabGroup.selectedIndex = 2;
       fixture.detectChanges();
+      fixture.whenStable().then(() => {
 
-      expect(getSelectedLabel(fixture).textContent).toMatch('Fruit');
-      expect(getSelectedContent(fixture).textContent).toMatch('Apples, grapes');
+        expect(getSelectedLabel(fixture).textContent).toMatch('Fruit');
+        expect(getSelectedContent(fixture).textContent).toMatch('Apples, grapes');
 
-      fixture.componentInstance.otherLabel = 'Chips';
-      fixture.componentInstance.otherContent = 'Salt, vinegar';
-      fixture.detectChanges();
+        fixture.componentInstance.otherLabel = 'Chips';
+        fixture.componentInstance.otherContent = 'Salt, vinegar';
+        fixture.detectChanges();
 
-      expect(getSelectedLabel(fixture).textContent).toMatch('Chips');
-      expect(getSelectedContent(fixture).textContent).toMatch('Salt, vinegar');
-    });
+        expect(getSelectedLabel(fixture).textContent).toMatch('Chips');
+        expect(getSelectedContent(fixture).textContent).toMatch('Salt, vinegar');
+      });
+    }));
 
     it('should support @ViewChild in the tab content', () => {
       expect(fixture.componentInstance.legumes).toBeTruthy();

src/lib/tabs/tabs-module.ts

@@ -14,7 +14,7 @@ import {NgModule} from '@angular/core';
 import {MdCommonModule, MdRippleModule} from '@angular/material/core';
 import {MdInkBar} from './ink-bar';
 import {MdTab} from './tab';
-import {MdTabBody} from './tab-body';
+import {MdTabBody, MdTabBodyPortal} from './tab-body';
 import {MdTabGroup} from './tab-group';
 import {MdTabHeader} from './tab-header';
 import {MdTabLabel} from './tab-label';
@@ -41,6 +41,7 @@ import {MdTabLink, MdTabNav} from './tab-nav-bar/tab-nav-bar';
     MdTabLink,
   ],
   declarations: [
+    MdTabBodyPortal,
     MdTabGroup,
     MdTabLabel,
     MdTab,

src/lib/tabs/tabs.spec.ts

@@ -0,0 +1,44 @@
+import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MdTabsModule} from './public_api';
+
+
+describe('MdTabs', () => {
+  let fixture: ComponentFixture<TestTabs>;
+  let element: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [CommonModule, MdTabsModule, BrowserAnimationsModule],
+      declarations: [TestTabs]
+    });
+    TestBed.compileComponents();
+  }));
+
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestTabs);
+    element = fixture.nativeElement;
+    fixture.detectChanges();
+  });
+
+  it('will properly load content on first change detection pass', () => {
+    expect(element.querySelectorAll('.mat-tab-body')[0].querySelectorAll('.items').length).toBe(3);
+  });
+});
+
+
+@Component({
+  template: `
+    <md-tab-group>
+      <md-tab label="tab 1">
+        <p class="items">content for tab 1</p>
+        <p class="items">content for tab 1</p>
+        <p class="items">content for tab 1</p>
+      </md-tab>
+    </md-tab-group>
+  `
+})
+class TestTabs {}