fix(material/expansion): picking up lazy content from child component

src/material/expansion/expansion-panel-base.ts

@@ -0,0 +1,25 @@
+/**
+ * @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 {InjectionToken} from '@angular/core';
+import {CdkAccordionItem} from '@angular/cdk/accordion';
+
+/**
+ * Base interface for a `MatExpansionPanel`.
+ * @docs-private
+ */
+export interface MatExpansionPanelBase extends CdkAccordionItem {
+  /** Whether the toggle indicator should be hidden. */
+  hideToggle: boolean;
+}
+
+/**
+ * Token used to provide a `MatExpansionPanel` to `MatExpansionPanelContent`.
+ * Used to avoid circular imports between `MatExpansionPanel` and `MatExpansionPanelContent`.
+ */
+export const MAT_EXPANSION_PANEL = new InjectionToken<MatExpansionPanelBase>('MAT_EXPANSION_PANEL');

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

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, TemplateRef} from '@angular/core';
+import {Directive, TemplateRef, Inject, Optional} from '@angular/core';
+import {MAT_EXPANSION_PANEL, MatExpansionPanelBase} from './expansion-panel-base';
 
 /**
  * Expansion panel content that will be rendered lazily
@@ -16,5 +17,8 @@ import {Directive, TemplateRef} from '@angular/core';
   selector: 'ng-template[matExpansionPanelContent]',
 })
 export class MatExpansionPanelContent {
-  constructor(public _template: TemplateRef<any>) {}
+  constructor(
+    public _template: TemplateRef<any>,
+    @Inject(MAT_EXPANSION_PANEL) @Optional() public _expansionPanel?: MatExpansionPanelBase,
+  ) {}
 }

src/material/expansion/expansion-panel.ts

@@ -39,6 +39,7 @@ import {Subject} from 'rxjs';
 import {distinctUntilChanged, filter, startWith, take} from 'rxjs/operators';
 import {MatAccordionBase, MatAccordionTogglePosition, MAT_ACCORDION} from './accordion-base';
 import {matExpansionAnimations} from './expansion-animations';
+import {MAT_EXPANSION_PANEL} from './expansion-panel-base';
 import {MatExpansionPanelContent} from './expansion-panel-content';
 
 /** MatExpansionPanel's states. */
@@ -87,6 +88,7 @@ export const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS =
     // Provide MatAccordion as undefined to prevent nested expansion panels from registering
     // to the same accordion.
     {provide: MAT_ACCORDION, useValue: undefined},
+    {provide: MAT_EXPANSION_PANEL, useExisting: MatExpansionPanel},
   ],
   host: {
     'class': 'mat-expansion-panel',
@@ -215,7 +217,7 @@ export class MatExpansionPanel
   }
 
   ngAfterContentInit() {
-    if (this._lazyContent) {
+    if (this._lazyContent && this._lazyContent._expansionPanel === this) {
       // Render the content as soon as the panel becomes open.
       this.opened
         .pipe(

src/material/expansion/expansion.spec.ts

@@ -31,6 +31,7 @@ describe('MatExpansionPanel', () => {
           LazyPanelOpenOnLoad,
           PanelWithTwoWayBinding,
           PanelWithHeaderTabindex,
+          NestedLazyPanelWithContent,
         ],
       });
       TestBed.compileComponents();
@@ -91,6 +92,36 @@ describe('MatExpansionPanel', () => {
       .toContain('Some content');
   }));
 
+  it('should not render lazy content from a child panel inside the parent', fakeAsync(() => {
+    const fixture = TestBed.createComponent(NestedLazyPanelWithContent);
+    fixture.componentInstance.parentExpanded = true;
+    fixture.detectChanges();
+
+    const parentContent: HTMLElement = fixture.nativeElement.querySelector(
+      '.parent-panel .mat-expansion-panel-content',
+    );
+    const childContent: HTMLElement = fixture.nativeElement.querySelector(
+      '.child-panel .mat-expansion-panel-content',
+    );
+
+    expect(parentContent.textContent!.trim()).toBe(
+      'Parent content',
+      'Expected only parent content to be rendered.',
+    );
+    expect(childContent.textContent!.trim()).toBe(
+      '',
+      'Expected child content element to be empty.',
+    );
+
+    fixture.componentInstance.childExpanded = true;
+    fixture.detectChanges();
+
+    expect(childContent.textContent!.trim()).toBe(
+      'Child content',
+      'Expected child content element to be rendered.',
+    );
+  }));
+
   it('emit correct events for change in panel expanded state', () => {
     const fixture = TestBed.createComponent(PanelWithContent);
     fixture.componentInstance.expanded = true;
@@ -621,3 +652,19 @@ class PanelWithTwoWayBinding {
   </mat-expansion-panel>`,
 })
 class PanelWithHeaderTabindex {}
+
+@Component({
+  template: `
+    <mat-expansion-panel class="parent-panel" [expanded]="parentExpanded">
+      Parent content
+
+      <mat-expansion-panel class="child-panel" [expanded]="childExpanded">
+        <ng-template matExpansionPanelContent>Child content</ng-template>
+      </mat-expansion-panel>
+    </mat-expansion-panel>
+  `,
+})
+class NestedLazyPanelWithContent {
+  parentExpanded = false;
+  childExpanded = false;
+}

src/material/expansion/public-api.ts

@@ -13,3 +13,4 @@ export * from './expansion-panel';
 export * from './expansion-panel-header';
 export * from './expansion-panel-content';
 export * from './expansion-animations';
+export {MAT_EXPANSION_PANEL} from './expansion-panel-base';

tools/public_api_guard/material/expansion.md

@@ -42,6 +42,9 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = "225ms cubic-bezier(0.4,0.0,0.2,
 // @public
 export const MAT_ACCORDION: InjectionToken<MatAccordionBase>;
 
+// @public
+export const MAT_EXPANSION_PANEL: InjectionToken<MatExpansionPanelBase>;
+
 // @public
 export const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS: InjectionToken<MatExpansionPanelDefaultOptions>;
 
@@ -142,13 +145,15 @@ export class MatExpansionPanelActionRow {
 
 // @public
 export class MatExpansionPanelContent {
-    constructor(_template: TemplateRef<any>);
+    constructor(_template: TemplateRef<any>, _expansionPanel?: MatExpansionPanelBase | undefined);
+    // (undocumented)
+    _expansionPanel?: MatExpansionPanelBase | undefined;
     // (undocumented)
     _template: TemplateRef<any>;
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatExpansionPanelContent, "ng-template[matExpansionPanelContent]", never, {}, {}, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelContent, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatExpansionPanelContent, [null, { optional: true; }]>;
 }
 
 // @public