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

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/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';
 
 /** Time and timing curve for expansion panel animations. */
 export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
@@ -88,7 +96,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()
@@ -106,9 +114,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;
   }
@@ -134,6 +149,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';