diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts index f04cb2cdc44a..6e6144a004b3 100644 --- a/src/lib/expansion/expansion-panel.ts +++ b/src/lib/expansion/expansion-panel.ts @@ -142,6 +142,7 @@ export class MatExpansionPanel extends _MatExpansionPanelMixinBase } ngOnDestroy() { + super.ngOnDestroy(); this._inputChanges.complete(); } } diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts index 53a0cae367c4..c9c0c8b59079 100644 --- a/src/lib/expansion/expansion.spec.ts +++ b/src/lib/expansion/expansion.spec.ts @@ -14,6 +14,7 @@ describe('MatExpansionPanel', () => { ], declarations: [ PanelWithContent, + PanelWithContentInNgIf, PanelWithCustomMargin ], }); @@ -138,6 +139,16 @@ describe('MatExpansionPanel', () => { expect(arrow.style.transform).toBe('rotate(180deg)', 'Expected 180 degree rotation.'); })); + it('make sure accordion item runs ngOnDestroy when expansion panel is destroyed', () => { + let fixture = TestBed.createComponent(PanelWithContentInNgIf); + fixture.detectChanges(); + let destroyedOk = false; + fixture.componentInstance.panel.destroyed.subscribe(() => destroyedOk = true); + fixture.componentInstance.expansionShown = false; + fixture.detectChanges(); + expect(destroyedOk).toBe(true); + }); + describe('disabled state', () => { let fixture: ComponentFixture; let panel: HTMLElement; @@ -221,6 +232,18 @@ class PanelWithContent { @ViewChild(MatExpansionPanel) panel: MatExpansionPanel; } +@Component({ + template: ` +
+ + Panel Title + +
` +}) +class PanelWithContentInNgIf { + expansionShown = true; + @ViewChild(MatExpansionPanel) panel: MatExpansionPanel; +} @Component({ styles: [