perf(expansion-panel): render content 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 switch the component to rendering only while the panel is open or animating.

Fixes #8230.

Author: crisbeto

src/lib/expansion/expansion-module.ts

@@ -11,6 +11,7 @@ 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 {
   MatExpansionPanel,
@@ -25,7 +26,7 @@ import {
 
 
 @NgModule({
-  imports: [CommonModule, A11yModule, CdkAccordionModule],
+  imports: [CommonModule, A11yModule, CdkAccordionModule, PortalModule],
   exports: [
     MatAccordion,
     MatExpansionPanel,

src/lib/expansion/expansion-panel.html

@@ -1,8 +1,12 @@
 <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()"
+     (@bodyExpansion.done)="_animationDone.next()"
+     [id]="id">
   <div class="mat-expansion-panel-body">
-    <ng-content></ng-content>
+    <ng-template><ng-content></ng-content></ng-template>
+    <ng-template cdkPortalOutlet></ng-template>
   </div>
   <ng-content select="mat-action-row"></ng-content>
 </div>

src/lib/expansion/expansion-panel.ts

@@ -20,11 +20,18 @@ import {
   Optional,
   SimpleChanges,
   ViewEncapsulation,
+  TemplateRef,
+  ViewChild,
+  ViewContainerRef,
+  AfterViewInit,
 } from '@angular/core';
 import {CdkAccordionItem} from '@angular/cdk/accordion';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
 import {CanDisable, mixinDisabled} from '@angular/material/core';
+import {CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';
 import {Subject} from 'rxjs/Subject';
+import {take} from 'rxjs/operators/take';
+import {startWith} from 'rxjs/operators/startWith';
 import {MatAccordion} from './accordion';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
@@ -89,19 +96,32 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
   ],
 })
 export class MatExpansionPanel extends _MatExpansionPanelMixinBase
-    implements CanDisable, OnChanges, OnDestroy {
+    implements CanDisable, AfterViewInit, OnChanges, OnDestroy {
   /** Whether the toggle indicator should be hidden. */
   @Input() hideToggle: boolean = false;
 
   /** Stream that emits for changes in `@Input` properties. */
   _inputChanges = new Subject<SimpleChanges>();
 
+  /** Stream that emits whenever an animation is complete. */
+  _animationDone = new Subject<void>();
+
   /** Optionally defined accordion the expansion panel belongs to. */
   accordion: MatAccordion;
 
+  /** `<ng-template>` that holds the user's content. */
+  @ViewChild(TemplateRef) _content: TemplateRef<any>;
+
+  /** Outlet into which the user's content will be projected. */
+  @ViewChild(CdkPortalOutlet) _outlet: CdkPortalOutlet;
+
+  /** Portal holding the user's content. */
+  private _portal: TemplatePortal<any>;
+
   constructor(@Optional() @Host() accordion: MatAccordion,
               _changeDetectorRef: ChangeDetectorRef,
-              _uniqueSelectionDispatcher: UniqueSelectionDispatcher) {
+              _uniqueSelectionDispatcher: UniqueSelectionDispatcher,
+              private _viewContainerRef: ViewContainerRef) {
     super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
     this.accordion = accordion;
   }
@@ -127,12 +147,31 @@ export class MatExpansionPanel extends _MatExpansionPanelMixinBase
     return this.expanded ? 'expanded' : 'collapsed';
   }
 
+  ngAfterViewInit() {
+    this._portal = new TemplatePortal<any>(this._content, this._viewContainerRef);
+
+    // Render the content as soon as the panel becomes open.
+    this.opened.pipe(startWith(null!)).subscribe(() => {
+      if (this.expanded && !this._outlet.hasAttached()) {
+        this._outlet.attach(this._portal);
+      }
+    });
+
+    // Remove the content once the panel is closed and the closing animation is done.
+    this.closed.subscribe(() => {
+      if (this._outlet.hasAttached()) {
+        this._animationDone.pipe(take(1)).subscribe(() => this._outlet.detach());
+      }
+    });
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     this._inputChanges.next(changes);
   }
 
   ngOnDestroy() {
     this._inputChanges.complete();
+    this._animationDone.complete();
   }
 }
 

src/lib/expansion/expansion.spec.ts

@@ -14,7 +14,8 @@ describe('MatExpansionPanel', () => {
       ],
       declarations: [
         PanelWithContent,
-        PanelWithCustomMargin
+        PanelWithCustomMargin,
+        PanelOpenOnLoad,
       ],
     });
     TestBed.compileComponents();
@@ -34,6 +35,48 @@ describe('MatExpansionPanel', () => {
     expect(contentEl.classes['mat-expanded']).toBeTruthy();
   });
 
+  it('should render panel content lazily', fakeAsync(() => {
+    let fixture = TestBed.createComponent(PanelWithContent);
+    let content = fixture.debugElement.query(By.css('.mat-expansion-panel-content')).nativeElement;
+    fixture.detectChanges();
+
+    expect(content.innerText.trim()).toBe('', 'Expected content element to be empty.');
+
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+
+    expect(content.innerText.trim()).toContain('Some content', 'Expected content to be rendered.');
+  }));
+
+  it('should remove the panel content once the close animation is done', fakeAsync(() => {
+    let fixture = TestBed.createComponent(PanelWithContent);
+    let content = fixture.debugElement.query(By.css('.mat-expansion-panel-content')).nativeElement;
+
+    fixture.componentInstance.expanded = true;
+    fixture.detectChanges();
+    tick(250);
+
+    expect(content.innerText).toContain('Some content', 'Expected content to be rendered.');
+
+    fixture.componentInstance.expanded = false;
+    fixture.detectChanges();
+
+    expect(content.innerText).toContain('Some content', 'Expected content to still be visible.');
+
+    tick(250);
+
+    expect(content.innerText.trim())
+        .toBe('', 'Expected content to be removed once the animation is done.');
+  }));
+
+  it('should render the content for a panel that is opened on init', fakeAsync(() => {
+    let fixture = TestBed.createComponent(PanelOpenOnLoad);
+    let content = fixture.debugElement.query(By.css('.mat-expansion-panel-content')).nativeElement;
+    fixture.detectChanges();
+
+    expect(content.innerText.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 +103,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 +281,13 @@ class PanelWithContent {
 class PanelWithCustomMargin {
   expanded: boolean = false;
 }
+
+
+@Component({
+  template: `
+  <mat-expansion-panel [expanded]="true">
+    <mat-expansion-panel-header>Panel Title</mat-expansion-panel-header>
+    <p>Some content</p>
+  </mat-expansion-panel>`
+})
+class PanelOpenOnLoad {}

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',