feat(tabs): adds ability for lazy loaded tabs

Author: amcdnl

src/demo-app/demo-app/demo-module.ts

@@ -30,7 +30,9 @@ import {SidenavDemo} from '../sidenav/sidenav-demo';
 import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
 import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
 import {MenuDemo} from '../menu/menu-demo';
-import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
+import {
+  FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo, Counter
+} from '../tabs/tabs-demo';
 import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
@@ -103,6 +105,7 @@ import {TableHeaderDemo} from '../table/table-header-demo';
     SunnyTabContent,
     RainyTabContent,
     FoggyTabContent,
+    Counter,
     PlatformDemo,
     TypographyDemo,
     ExpansionDemo,

src/demo-app/tabs/tabs-demo.html

@@ -277,3 +277,17 @@ <h1>Tabs with background color</h1>
     </div>
   </md-tab>
 </md-tab-group>
+
+<h1>Lazy Loaded Tabs</h1>
+<md-tab-group>
+  <md-tab label="First">
+    <ng-template mdTabContent>
+      <counter></counter>
+    </ng-template>
+  </md-tab>
+  <md-tab label="Second">
+    <ng-template mdTabContent>
+      <counter></counter>
+    </ng-template>
+  </md-tab>
+</md-tab-group>

src/demo-app/tabs/tabs-demo.ts

@@ -125,3 +125,17 @@ export class RainyTabContent {}
   template: 'This is the routed body of the foggy tab.',
 })
 export class FoggyTabContent {}
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'counter',
+  template: `<span>{{count}}</span>`
+})
+export class Counter {
+  count = 0;
+  ngOnInit() {
+    this.count++;
+    console.log('Counting...', this.count);
+  }
+}

src/lib/tabs/tab-body.html

@@ -2,5 +2,5 @@
      [@translateTab]="_position"
      (@translateTab.start)="_onTranslateTabStarted($event)"
      (@translateTab.done)="_onTranslateTabComplete($event)">
-  <ng-template cdkPortalHost></ng-template>
+  <ng-template tabBodyHost></ng-template>
 </div>

src/lib/tabs/tab-body.ts

@@ -11,13 +11,16 @@ import {
   Component,
   Input,
   Output,
+  Directive,
   EventEmitter,
   OnInit,
   ElementRef,
   Optional,
-  AfterViewChecked,
+  DoCheck,
   ViewEncapsulation,
   ChangeDetectionStrategy,
+  ComponentFactoryResolver,
+  ViewContainerRef,
 } from '@angular/core';
 import {
   trigger,
@@ -31,6 +34,30 @@ import {TemplatePortal, PortalHostDirective} from '@angular/cdk/portal';
 import {Directionality, Direction} from '@angular/cdk/bidi';
 
 
+
+
+
+
+@Directive({
+  selector: '[tabBodyHost]'
+})
+export class TabsBodyPortal extends PortalHostDirective {
+  constructor(
+    _componentFactoryResolver: ComponentFactoryResolver,
+    _viewContainerRef: ViewContainerRef,
+    private host: MdTabBody) {
+    super(_componentFactoryResolver, _viewContainerRef);
+  }
+
+  ngOnInit() {
+    this.host._setVisibleState();
+    this.host.onCentered.subscribe(() => this.host._setVisibleState());
+  }
+}
+
+
+
+
 /**
  * These position states are used internally as animation states for the tab body. Setting the
  * position state to left, right, or center will transition the tab body from its current
@@ -88,9 +115,9 @@ 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(TabsBodyPortal) _portalHost: TabsBodyPortal;
 
   /** Event emitted when the tab begins to animate towards the center as the active tab. */
   @Output() onCentering: EventEmitter<number> = new EventEmitter<number>();
@@ -135,29 +162,29 @@ export class MdTabBody implements OnInit, AfterViewChecked {
    * After initialized, check if the content is centered and has an origin. If so, set the
    * special position states that transition the tab from the left or right before centering.
    */
-  ngOnInit() {
+  ngOnInit(): void {
     if (this._position == 'center' && this._origin) {
       this._position = this._origin == 'left' ? 'left-origin-center' : 'right-origin-center';
     }
   }
 
-  /**
-   * 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() {
+  /** Sets whether the tab body is currently visible. */
+  _setVisibleState() {
     if (this._isCenterPosition(this._position) && !this._portalHost.hasAttached()) {
+      // It is important to attach the view during `DoCheck`; if an
+      // embedded view is created during change detection, it will either
+      // cause a changed-after-checked error or never be checked at all.
       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) {
+  _onTranslateTabComplete(e: AnimationEvent): void {
     // If the end state is that the tab is not centered, then detach the content.
     if (!this._isCenterPosition(e.toState) && !this._isCenterPosition(this._position)) {
       this._portalHost.detach();

src/lib/tabs/tab-content.ts

@@ -0,0 +1,6 @@
+import {Directive, TemplateRef} from '@angular/core';
+
+@Directive({ selector: '[mdTabContent]' })
+export class MdTabContent {
+  constructor(public template: TemplateRef<any>) { }
+}

src/lib/tabs/tab.html

@@ -1,4 +1,9 @@
 <!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this
     TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
     tab-group. -->
-<ng-template><ng-content></ng-content></ng-template>
+<ng-template #bodyTemplate>
+  <ng-content></ng-content>
+  <ng-template *ngIf="templateBody && templateBody.template" 
+               [ngTemplateOutlet]="templateBody.template">
+  </ng-template>
+</ng-template>

src/lib/tabs/tab.ts

@@ -22,6 +22,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {CanDisable, mixinDisabled} from '@angular/material/core';
+import {MdTabContent} from './tab-content';
 import {Subject} from 'rxjs/Subject';
 import {MdTabLabel} from './tab-label';
 
@@ -44,9 +45,10 @@ export const _MdTabMixinBase = mixinDisabled(MdTabBase);
 export class MdTab extends _MdTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy {
   /** Content for the tab label given by <ng-template md-tab-label>. */
   @ContentChild(MdTabLabel) templateLabel: MdTabLabel;
+  @ContentChild(MdTabContent) templateBody: MdTabContent;
 
   /** Template inside the MdTab view that contains an <ng-content>. */
-  @ViewChild(TemplateRef) _content: TemplateRef<any>;
+  @ViewChild('bodyTemplate') _content: TemplateRef<any>;
 
   /** The plain text label for the tab, used when there is no template label. */
   @Input('label') textLabel: string = '';

src/lib/tabs/tabs-module.ts

@@ -14,12 +14,13 @@ 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, TabsBodyPortal} from './tab-body';
 import {MdTabGroup} from './tab-group';
 import {MdTabHeader} from './tab-header';
 import {MdTabLabel} from './tab-label';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
 import {MdTabLink, MdTabNav} from './tab-nav-bar/tab-nav-bar';
+import {MdTabContent} from './tab-content';
 
 
 @NgModule({
@@ -39,17 +40,20 @@ import {MdTabLink, MdTabNav} from './tab-nav-bar/tab-nav-bar';
     MdTab,
     MdTabNav,
     MdTabLink,
+    MdTabContent,
   ],
   declarations: [
     MdTabGroup,
+    TabsBodyPortal,
     MdTabLabel,
     MdTab,
     MdInkBar,
     MdTabLabelWrapper,
     MdTabNav,
     MdTabLink,
     MdTabBody,
-    MdTabHeader
+    MdTabHeader,
+    MdTabContent,
   ],
   providers: [VIEWPORT_RULER_PROVIDER],
 })

src/lib/tabs/tabs.spec.ts

@@ -0,0 +1,51 @@
+import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {async, ComponentFixture, TestBed, flushMicrotasks, fakeAsync} from '@angular/core/testing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MdTabsModule} from './public_api';
+
+
+fdescribe('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 pass after click.', () => {
+    const firstTab = element.querySelectorAll('.mat-tab-label')[0] as HTMLElement;
+    firstTab.click();
+    fixture.detectChanges();
+
+    expect(element.querySelectorAll('.mat-tab-body')[0].querySelectorAll('.items').length).toBe(1);
+  });
+  it('won\'t pass without click.', () => {
+    expect(element.querySelectorAll('.mat-tab-body')[0].querySelectorAll('.items').length).toBe(1);
+  });
+});
+
+@Component({
+  template: `
+    <md-tab-group>
+      <md-tab label="tab 1">
+        <p class="items"> content for tab 1</p>
+      </md-tab>
+      <md-tab label="tab 2">
+        <p class="items"> content for tab 2</p>
+      </md-tab>
+    </md-tab-group>
+  `
+})
+class TestTabs {}