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
+     [class.mat-tab-body-hidden]="!visible"
      [@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.scss

@@ -6,3 +6,7 @@
     overflow: hidden;
   }
 }
+
+.mat-tab-body-hidden {
+  display: none;
+}

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: [
@@ -145,30 +146,6 @@ describe('MdTabBody', () => {
       expect(fixture.componentInstance.mdTabBody._position).toBe('left');
     });
   });
-
-  describe('on centered', () => {
-    let fixture: ComponentFixture<SimpleTabBodyApp>;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(SimpleTabBodyApp);
-    }));
-
-    it('should attach the content when centered and detach when not', fakeAsync(() => {
-      fixture.componentInstance.position = 1;
-      fixture.detectChanges();
-      expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false);
-
-      fixture.componentInstance.position = 0;
-      fixture.detectChanges();
-      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

@@ -12,12 +12,15 @@ import {
   Input,
   Output,
   EventEmitter,
+  OnDestroy,
   OnInit,
   ElementRef,
+  Directive,
   Optional,
-  AfterViewChecked,
   ViewEncapsulation,
   ChangeDetectionStrategy,
+  ComponentFactoryResolver,
+  ViewContainerRef,
 } from '@angular/core';
 import {
   trigger,
@@ -29,7 +32,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 +58,44 @@ 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, OnDestroy {
+  /** A subscription to events for when the tab body begins centering. */
+  private _centeringSub: Subscription;
+
+  constructor(
+    _componentFactoryResolver: ComponentFactoryResolver,
+    _viewContainerRef: ViewContainerRef,
+    private _host: MdTabBody) {
+      super(_componentFactoryResolver, _viewContainerRef);
+  }
+
+  /** Set initial visibility or set up subscription for changing visibility. */
+  ngOnInit(): void {
+    if (this._host._isCenterPosition(this._host._position)) {
+      this.attach(this._host._content);
+    } else {
+      this._centeringSub = this._host.onCentering.subscribe(() => {
+        this.attach(this._host._content);
+        this._centeringSub.unsubscribe();
+      });
+    }
+  }
+
+  /** Clean up subscription if necessary. */
+  ngOnDestroy(): void {
+    if (this._centeringSub && !this._centeringSub.closed) {
+      this._centeringSub.unsubscribe();
+    }
+  }
+}
+
 /**
  * Wrapper for the contents of a tab.
  * @docs-private
@@ -88,9 +132,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
     ])
   ]
 })
-export class MdTabBody implements OnInit, AfterViewChecked {
-  /** The portal host inside of this container into which the tab body content will be loaded. */
-  @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
+export class MdTabBody implements OnInit {
 
   /** Event emitted when the tab begins to animate towards the center as the active tab. */
   @Output() onCentering: EventEmitter<number> = new EventEmitter<number>();
@@ -128,6 +170,9 @@ export class MdTabBody implements OnInit, AfterViewChecked {
     }
   }
 
+  /** Whether the tab body should be visible. */
+  visible = false;
+
   constructor(private _elementRef: ElementRef,
               @Optional() private _dir: Directionality) { }
 
@@ -138,29 +183,21 @@ export class MdTabBody implements OnInit, AfterViewChecked {
   ngOnInit() {
     if (this._position == 'center' && this._origin) {
       this._position = this._origin == 'left' ? 'left-origin-center' : 'right-origin-center';
+      this.visible = true;
     }
   }
 
-  /**
-   * 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);
+      this.visible = true;
     }
   }
 
-  _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.visible = false;
     }
 
     // If the transition to the center is complete, emit an event.
@@ -175,7 +212,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

@@ -30,15 +30,22 @@ describe('MdTabGroup', () => {
 
   describe('basic behavior', () => {
     let fixture: ComponentFixture<SimpleTabsTestApp>;
+    let element: HTMLElement;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(SimpleTabsTestApp);
+      element = fixture.nativeElement;
     });
 
     it('should default to the first tab', () => {
       checkSelectedIndex(1, fixture);
     });
 
+    it('will properly load content on first change detection pass', () => {
+      fixture.detectChanges();
+      expect(element.querySelectorAll('.mat-tab-body')[1].querySelectorAll('span').length).toBe(3);
+    });
+
     it('should change selected index on click', () => {
       let component = fixture.debugElement.componentInstance;
       component.selectedIndex = 0;
@@ -322,23 +329,26 @@ 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();
+      // Use whenStable to wait for async observables and change detection to run in content.
+      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();
@@ -419,7 +429,7 @@ describe('nested MdTabGroup with enabled animations', () => {
       </md-tab>
       <md-tab>
         <ng-template md-tab-label>Tab Two</ng-template>
-        Tab two content
+        <span>Tab </span><span>two</span><span>content</span>
       </md-tab>
       <md-tab>
         <ng-template md-tab-label>Tab Three</ng-template>

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 {}