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

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,21 @@ import {
   Optional,
   SimpleChanges,
   ViewEncapsulation,
+  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 +99,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 +117,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 +152,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,25 @@ panel can be expanded at a given time:
 </mat-accordion>
 ```
 
+### Lazy rendering
+By default, the expansion panel content will be initialized even when the panel is closed.
+To instead defer initialization until the panel is open, the content should be provided as
+an `ng-template`:
+```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

@@ -15,7 +15,9 @@ describe('MatExpansionPanel', () => {
       declarations: [
         PanelWithContent,
         PanelWithContentInNgIf,
-        PanelWithCustomMargin
+        PanelWithCustomMargin,
+        LazyPanelWithContent,
+        LazyPanelOpenOnLoad,
       ],
     });
     TestBed.compileComponents();
@@ -35,6 +37,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;
@@ -61,12 +86,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.');
 
@@ -260,3 +286,30 @@ class PanelWithContentInNgIf {
 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';