feat(expansion-panel): allow for content to be rendered lazily

Currently the expansion panel renders all of its content on load which can be expensive, considering that all of it won't be visible. These changes allow for some of the content to be rendered lazily via the `matExpansionPanelContent` directive.

Fixes #8230.

Author: crisbeto

src/cdk/accordion/accordion-item.ts

@@ -72,7 +72,7 @@ export class CdkAccordionItem implements OnDestroy {
   private _removeUniqueSelectionListener: () => void = () => {};
 
   constructor(@Optional() public accordion: CdkAccordion,
-              private _changeDetectorRef: ChangeDetectorRef,
+              protected _changeDetectorRef: ChangeDetectorRef,
               protected _expansionDispatcher: UniqueSelectionDispatcher) {
     this._removeUniqueSelectionListener =
       _expansionDispatcher.listen((id: string, accordionId: string) => {

src/demo-app/expansion/expansion-demo.html

@@ -6,8 +6,10 @@ <h1>Single Expansion Panel</h1>
     <mat-panel-title>Panel Title</mat-panel-title>
   </mat-expansion-panel-header>
 
+  <ng-template matExpansionPanelContent>
     This is the content text that makes sense here.
     <mat-checkbox>Trigger a ripple</mat-checkbox>
+  </ng-template>
 
   <mat-action-row>
     <button mat-button (click)="myPanel.expanded = false">CANCEL</button>

src/lib/expansion/expansion-module.ts

@@ -11,7 +11,9 @@ import {NgModule} from '@angular/core';
 import {UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '@angular/cdk/collections';
 import {CdkAccordionModule} from '@angular/cdk/accordion';
 import {A11yModule} from '@angular/cdk/a11y';
+import {PortalModule} from '@angular/cdk/portal';
 import {MatAccordion} from './accordion';
+import {MatExpansionPanelContent} from './expansion-panel-content';
 import {
   MatExpansionPanel,
   MatExpansionPanelActionRow,
@@ -25,14 +27,15 @@ import {
 
 
 @NgModule({
-  imports: [CommonModule, A11yModule, CdkAccordionModule],
+  imports: [CommonModule, A11yModule, CdkAccordionModule, PortalModule],
   exports: [
     MatAccordion,
     MatExpansionPanel,
     MatExpansionPanelActionRow,
     MatExpansionPanelHeader,
     MatExpansionPanelTitle,
-    MatExpansionPanelDescription
+    MatExpansionPanelDescription,
+    MatExpansionPanelContent,
   ],
   declarations: [
     MatExpansionPanelBase,
@@ -41,7 +44,8 @@ import {
     MatExpansionPanelActionRow,
     MatExpansionPanelHeader,
     MatExpansionPanelTitle,
-    MatExpansionPanelDescription
+    MatExpansionPanelDescription,
+    MatExpansionPanelContent,
   ],
   providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER]
 })

src/lib/expansion/expansion-panel-content.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google LLC 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';
+
+/**
+ * Expansion panel content that will be rendered lazily
+ * after the panel is opened for the first time.
+ */
+@Directive({
+  selector: 'ng-template[matExpansionPanelContent]'
+})
+export class MatExpansionPanelContent {
+  constructor(public _template: TemplateRef<any>) {}
+}

src/lib/expansion/expansion-panel.html

@@ -1,8 +1,11 @@
 <ng-content select="mat-expansion-panel-header"></ng-content>
-<div [class.mat-expanded]="expanded" class="mat-expansion-panel-content"
-     [@bodyExpansion]="_getExpandedState()" [id]="id">
+<div class="mat-expansion-panel-content"
+     [class.mat-expanded]="expanded"
+     [@bodyExpansion]="_getExpandedState()"
+     [id]="id">
   <div class="mat-expansion-panel-body">
     <ng-content></ng-content>
+    <ng-template [cdkPortalOutlet]="_portal"></ng-template>
   </div>
   <ng-content select="mat-action-row"></ng-content>
 </div>

src/lib/expansion/expansion-panel.ts

@@ -20,13 +20,23 @@ import {
   Optional,
   SimpleChanges,
   ViewEncapsulation,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  AfterContentInit,
+  ContentChild,
 } from '@angular/core';
 import {CdkAccordionItem} from '@angular/cdk/accordion';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
 import {CanDisable, mixinDisabled} from '@angular/material/core';
+import {TemplatePortal} from '@angular/cdk/portal';
 import {Subject} from 'rxjs/Subject';
+import {take} from 'rxjs/operators/take';
+import {filter} from 'rxjs/operators/filter';
+import {startWith} from 'rxjs/operators/startWith';
 import {MatAccordion} from './accordion';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {MatExpansionPanelContent} from './expansion-panel-content';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
 export const _CdkAccordionItem = CdkAccordionItem;
@@ -91,7 +101,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
   ],
 })
 export class MatExpansionPanel extends _MatExpansionPanelMixinBase
-    implements CanDisable, OnChanges, OnDestroy {
+    implements CanDisable, AfterContentInit, OnChanges, OnDestroy {
 
   /** Whether the toggle indicator should be hidden. */
   @Input()
@@ -109,9 +119,16 @@ export class MatExpansionPanel extends _MatExpansionPanelMixinBase
   /** Optionally defined accordion the expansion panel belongs to. */
   accordion: MatAccordion;
 
+  /** Content that will be rendered lazily. */
+  @ContentChild(MatExpansionPanelContent) _lazyContent: MatExpansionPanelContent;
+
+  /** Portal holding the user's content. */
+  _portal: TemplatePortal<any>;
+
   constructor(@Optional() @Host() accordion: MatAccordion,
               _changeDetectorRef: ChangeDetectorRef,
-              _uniqueSelectionDispatcher: UniqueSelectionDispatcher) {
+              _uniqueSelectionDispatcher: UniqueSelectionDispatcher,
+              private _viewContainerRef: ViewContainerRef) {
     super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
     this.accordion = accordion;
   }
@@ -137,6 +154,19 @@ export class MatExpansionPanel extends _MatExpansionPanelMixinBase
     return this.expanded ? 'expanded' : 'collapsed';
   }
 
+  ngAfterContentInit() {
+    if (this._lazyContent) {
+      // Render the content as soon as the panel becomes open.
+      this.opened.pipe(
+        startWith(null!),
+        filter(() => this.expanded && !this._portal),
+        take(1)
+      ).subscribe(() => {
+        this._portal = new TemplatePortal<any>(this._lazyContent._template, this._viewContainerRef);
+      });
+    }
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     this._inputChanges.next(changes);
   }

src/lib/expansion/expansion.md

@@ -99,9 +99,26 @@ panel can be expanded at a given time:
 </mat-accordion>
 ```
 
+### Lazy rendering
+
+If you want some content not to be rendered until its expansion panel is opened, you can wrap it in
+an `ng-template` using the `matExpansionPanelContent` directive.
+
+```html
+<mat-expansion-panel>
+  <mat-expansion-panel-header>
+    This is the expansion title
+  </mat-expansion-panel-header>
+
+  <ng-template matExpansionPanelContent>
+    Some deferred content
+  </ng-template>
+</mat-expansion-panel>
+```
+
 ### Accessibility
 The expansion-panel aims to mimic the experience of the native `<details>` and `<summary>` elements.
-The expansion panel header has `role="button"` and also the attribute `aria-controls` with the 
+The expansion panel header has `role="button"` and also the attribute `aria-controls` with the
 expansion panel's id as value.
 
 The expansion panel headers are buttons. Users can use the keyboard to activate the expansion panel

src/lib/expansion/expansion.spec.ts

@@ -14,7 +14,9 @@ describe('MatExpansionPanel', () => {
       ],
       declarations: [
         PanelWithContent,
-        PanelWithCustomMargin
+        PanelWithCustomMargin,
+        LazyPanelWithContent,
+        LazyPanelOpenOnLoad,
       ],
     });
     TestBed.compileComponents();
@@ -34,6 +36,29 @@ describe('MatExpansionPanel', () => {
     expect(contentEl.classes['mat-expanded']).toBeTruthy();
   });
 
+  it('should be able to render panel content lazily', fakeAsync(() => {
+    let fixture = TestBed.createComponent(LazyPanelWithContent);
+    let content = fixture.debugElement.query(By.css('.mat-expansion-panel-content')).nativeElement;
+    fixture.detectChanges();
+
+    expect(content.textContent.trim()).toBe('', 'Expected content element to be empty.');
+
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+
+    expect(content.textContent.trim())
+        .toContain('Some content', 'Expected content to be rendered.');
+  }));
+
+  it('should render the content for a lazy-loaded panel that is opened on init', fakeAsync(() => {
+    let fixture = TestBed.createComponent(LazyPanelOpenOnLoad);
+    let content = fixture.debugElement.query(By.css('.mat-expansion-panel-content')).nativeElement;
+    fixture.detectChanges();
+
+    expect(content.textContent.trim())
+        .toContain('Some content', 'Expected content to be rendered.');
+  }));
+
   it('emit correct events for change in panel expanded state', () => {
     const fixture = TestBed.createComponent(PanelWithContent);
     fixture.componentInstance.expanded = true;
@@ -60,12 +85,13 @@ describe('MatExpansionPanel', () => {
 
   it('should not be able to focus content while closed', fakeAsync(() => {
     const fixture = TestBed.createComponent(PanelWithContent);
-    const button = fixture.debugElement.query(By.css('button')).nativeElement;
 
     fixture.componentInstance.expanded = true;
     fixture.detectChanges();
     tick(250);
 
+    const button = fixture.debugElement.query(By.css('button')).nativeElement;
+
     button.focus();
     expect(document.activeElement).toBe(button, 'Expected button to start off focusable.');
 
@@ -237,3 +263,30 @@ class PanelWithContent {
 class PanelWithCustomMargin {
   expanded: boolean = false;
 }
+
+@Component({
+  template: `
+  <mat-expansion-panel [expanded]="expanded">
+    <mat-expansion-panel-header>Panel Title</mat-expansion-panel-header>
+
+    <ng-template matExpansionPanelContent>
+      <p>Some content</p>
+      <button>I am a button</button>
+    </ng-template>
+  </mat-expansion-panel>`
+})
+class LazyPanelWithContent {
+  expanded = false;
+}
+
+@Component({
+  template: `
+  <mat-expansion-panel [expanded]="true">
+    <mat-expansion-panel-header>Panel Title</mat-expansion-panel-header>
+
+    <ng-template matExpansionPanelContent>
+      <p>Some content</p>
+    </ng-template>
+  </mat-expansion-panel>`
+})
+class LazyPanelOpenOnLoad {}

src/lib/expansion/public-api.ts

@@ -10,5 +10,4 @@ export * from './expansion-module';
 export * from './accordion';
 export * from './expansion-panel';
 export * from './expansion-panel-header';
-
-
+export * from './expansion-panel-content';

tools/package-tools/rollup-globals.ts

@@ -84,6 +84,7 @@ export const rollupGlobals = {
   'rxjs/operators/share': 'Rx.Observable',
   'rxjs/operators/delay': 'Rx.Observable',
   'rxjs/operators/combineLatest': 'Rx.Observable',
+  'rxjs/operators/take': 'Rx.Observable',
 
   'rxjs/add/observable/merge': 'Rx.Observable',
   'rxjs/add/observable/fromEvent': 'Rx.Observable',