See this Stackblitz.
Angular Material mat-expansion-panel allows lazy rendering,
<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>
When rendered inside a hidden component, for example, a closed mat-sidenav, the mat-expansion-panel renders incorrectly (Stackblitz example):
This is a mess in many ways, not least because I define mat-expansion-panel to be collapsed (expanded="false"):
<mat-expansion-panel expanded="false">
<mat-expansion-panel-header>
<mat-panel-title>
<span>First</span>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<!-- Deferred initialization until the panel is open. -->
<span>You shouldn't see me yet!</span></ng-template>
<mat-action-row>
<button mat-button>Click me</button>
</mat-action-row>
</mat-expansion-panel>
Clicking the expansion-panel's header expands the panel (as it should) and renders the content correctly:
Interestingly, collapsing the panel shows how the panel should have rendered initially:
Both my Stackblitz example and the screenshots in this question show two expansion panels within a mat-accordion:
<mat-tab-group>
<mat-tab label="Empty">
<p>This is an empty tab</p>
</mat-tab>
<mat-tab label="Accordion">
<div class="mat-typography">
<mat-accordion>
<mat-expansion-panel expanded="true">
<mat-expansion-panel-header>
<mat-panel-title>
<span>First</span>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<!-- Deferred initialization until the panel is open. -->
<span>You shouldn't see me yet!</span></ng-template>
<mat-action-row>
<button mat-button>Click me</button>
</mat-action-row>
</mat-expansion-panel>
<mat-expansion-panel expanded="false">
<mat-expansion-panel-header>
<mat-panel-title>
<span>Second</span>
</mat-panel-title>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<!-- Deferred initialization until the panel is open. -->
<span>Shouldn't see me either!</span></ng-template>
<mat-action-row>
<button mat-button>Click me</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-tab>
</mat-tab-group>
The CSS just adds some colour for debugging:
mat-expansion-panel {
background-color: grey;
}
mat-expansion-panel:first-child mat-expansion-panel-header {
background-color:red;
}
mat-expansion-panel:last-child mat-expansion-panel-header {
background-color:blue;
}
mat-expansion-panel button {
background-color: yellow;
}
The mat-sidenav is about as bare-bones as it's possible to get:
<mat-sidenav-container>
<mat-sidenav #snav class="mat-elevation-z8">
<app-side-menu></app-side-menu>
</mat-sidenav>
<mat-sidenav-content>
<div>
<button mat-icon-button (click)="snav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
Update
A lengthy discussion on this has taken place on GitHub, issues/5269. While the issue remains open, it is being reported that the issue was fixed in angular/material v7.
