feat(tabs): add ability to lazy load tab content

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

@@ -54,7 +54,9 @@ import {TableDemo} from '../table/table-demo';
 import {ScreenTypeDemo} from '../screen-type/screen-type-demo';
 import {LayoutModule} from '@angular/cdk/layout';
 import {TableHeaderDemo} from '../table/table-header-demo';
-import {FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo} from '../tabs/tabs-demo';
+import {
+  FoggyTabContent, RainyTabContent, SunnyTabContent, TabsDemo, Counter
+} from '../tabs/tabs-demo';
 import {ToolbarDemo} from '../toolbar/toolbar-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {TypographyDemo} from '../typography/typography-demo';
@@ -86,6 +88,7 @@ import {DEMO_APP_ROUTES} from './routes';
     ExpansionDemo,
     FocusOriginDemo,
     FoggyTabContent,
+    Counter,
     GesturesDemo,
     GridListDemo,
     Home,

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

@@ -288,3 +288,17 @@ <h1>Tabs with autosize textarea</h1>
     </div>
   </mat-tab>
 </mat-tab-group>
+
+<h1>Lazy Loaded Tabs</h1>
+ <mat-tab-group>
+  <mat-tab label="First">
+    <ng-template matTabContent>
+      <counter></counter>
+    </ng-template>
+  </mat-tab>
+  <mat-tab label="Second">
+    <ng-template matTabContent>
+      <counter></counter>
+    </ng-template>
+  </mat-tab>
+ </mat-tab-group>

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

@@ -133,3 +133,16 @@ 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/public-api.ts

@@ -20,3 +20,4 @@ export {MatTabLabelWrapper} from './tab-label-wrapper';
 export {MatTab} from './tab';
 export {MatTabLabel} from './tab-label';
 export {MatTabNav, MatTabLink} from './tab-nav-bar/index';
+export {MdTabContent} from './tab-content';

src/lib/tabs/tab-body.ts

@@ -22,6 +22,7 @@ import {
   ComponentFactoryResolver,
   ViewContainerRef,
   forwardRef,
+  ViewChild,
 } from '@angular/core';
 import {
   trigger,
@@ -31,7 +32,7 @@ import {
   transition,
   AnimationEvent,
 } from '@angular/animations';
-import {TemplatePortal, CdkPortalOutlet} from '@angular/cdk/portal';
+import {TemplatePortal, CdkPortalOutlet, PortalHostDirective} from '@angular/cdk/portal';
 import {Directionality, Direction} from '@angular/cdk/bidi';
 import {Subscription} from 'rxjs/Subscription';
 
@@ -153,6 +154,9 @@ export class MatTabBody implements OnInit {
   /** Event emitted when the tab completes its animation towards the center. */
   @Output() _onCentered: EventEmitter<void> = new EventEmitter<void>(true);
 
+   /** The portal host inside of this container into which the tab body content will be loaded. */
+  @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective;
+
   /** The tab body content to display. */
   @Input('content') _content: TemplatePortal<any>;
 

src/lib/tabs/tab-content.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, TemplateRef} from '@angular/core';
+
+@Directive({selector: '[matTabContent]'})
+export class MdTabContent {
+  constructor(public template: TemplateRef<any>) { }
+}

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

@@ -18,6 +18,7 @@ describe('MatTabGroup', () => {
         AsyncTabsTestApp,
         DisabledTabsTestApp,
         TabGroupWithSimpleApi,
+        TemplateTabs,
       ],
     });
 
@@ -375,6 +376,23 @@ describe('MatTabGroup', () => {
     });
   });
 
+  describe('lazy loaded tabs', () => {
+    it('should lazy load the second tab', async () => {
+      let fixture = TestBed.createComponent(TemplateTabs);
+      fixture.detectChanges();
+
+      let tabLabel = fixture.debugElement.queryAll(By.css('.mat-tab-label'))[1];
+      tabLabel.nativeElement.click();
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        let child = fixture.debugElement.query(By.css('.child'));
+        expect(child.nativeElement).toBeDefined();
+      });
+    });
+   });
+
   /**
    * Checks that the `selectedIndex` has been updated; checks that the label and body have their
    * respective `active` classes
@@ -602,3 +620,19 @@ class TabGroupWithSimpleApi {
 })
 class NestedTabs {}
 
+@Component({
+  selector: 'template-tabs',
+  template: `
+    <mat-tab-group>
+      <mat-tab label="One">
+        Eager
+      </mat-tab>
+      <mat-tab label="Two">
+        <ng-template matTabContent>
+          <div class="child">Hi</div>
+        </ng-template>
+      </mat-tab>
+    </mat-tab-group>
+  `,
+ })
+ class TemplateTabs {}

src/lib/tabs/tab.ts

@@ -24,6 +24,7 @@ import {
 import {CanDisable, mixinDisabled} from '@angular/material/core';
 import {Subject} from 'rxjs/Subject';
 import {MatTabLabel} from './tab-label';
+import { MdTabContent } from './tab-content';
 
 
 // Boilerplate for applying mixins to MatTab.
@@ -45,8 +46,11 @@ export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnCh
   /** Content for the tab label given by <ng-template mat-tab-label>. */
   @ContentChild(MatTabLabel) templateLabel: MatTabLabel;
 
+  /** User provided template that we are going to use instead of implicitContent template */
+  @ContentChild(MdTabContent, {read: TemplateRef}) _explicitContent: TemplateRef<any>;
+
   /** Template inside the MatTab view that contains an <ng-content>. */
-  @ViewChild(TemplateRef) _content: TemplateRef<any>;
+  @ViewChild(TemplateRef) _implicitContent: TemplateRef<any>;
 
   /** The plain text label for the tab, used when there is no template label. */
   @Input('label') textLabel: string = '';
@@ -102,6 +106,7 @@ export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnCh
   }
 
   ngOnInit(): void {
-    this._contentPortal = new TemplatePortal(this._content, this._viewContainerRef);
+    this._contentPortal = new TemplatePortal(
+        this._explicitContent || this._implicitContent, this._viewContainerRef);
   }
 }

src/lib/tabs/tabs-module.ts

@@ -20,6 +20,7 @@ import {MatTabHeader} from './tab-header';
 import {MatTabLabel} from './tab-label';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
 import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
+import {MdTabContent} from './tab-content';
 
 
 @NgModule({
@@ -39,6 +40,7 @@ import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
     MatTab,
     MatTabNav,
     MatTabLink,
+    MdTabContent,
   ],
   declarations: [
     MatTabGroup,
@@ -50,7 +52,8 @@ import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
     MatTabLink,
     MatTabBody,
     MatTabBodyPortal,
-    MatTabHeader
+    MatTabHeader,
+    MdTabContent,
   ],
   providers: [VIEWPORT_RULER_PROVIDER],
 })

src/lib/tabs/tabs.md

@@ -80,6 +80,30 @@ The `tab-nav-bar` is not tied to any particular router; it works with normal `<a
 the `active` property to determine which tab is currently active. The corresponding
 `<router-outlet>` can be placed anywhere in the view.
 
+## Lazy Loading
+By default, the tab contents are eagerly loaded. Eagerly loaded tabs
+will initalize the child components but not inject them into the DOM
+until the tab is activated.
+
+If the tab contains several complex child components, it is advised
+to lazy load the tab's content. Tab contents can be lazy loaded by
+declaring the body in a `ng-template` with the `matTabContent` attribute.
+
+```html
+<md-tab-group>
+  <md-tab label="First">
+    <ng-template matTabContent>
+      The First Content
+    </ng-template>
+  </md-tab>
+  <md-tab label="Second">
+    <ng-template matTabContent>
+      The Second Content
+    </ng-template>
+  </md-tab>
+</md-tab-group>
+```
+
 ### Accessibility
 Tabs without text or labels should be given a meaningful label via `aria-label` or
 `aria-labelledby`. For `MatTabNav`, the `<nav>` element should have a label as well.