Expansion panels in factoried content are open initially

[pburkindine]

Factoried components containing expansion panels will show the expansion panels as open when the component is inside another (like sidenav) that enters the DOM. Non-factoried expansion panels do not have the same issue. Likely related to #11765

Reproduction

https://stackblitz.com/edit/sidenav-accordion-expansion

Steps to reproduce:

1. Open the sidenav
2. Should see the accordion is open during sidenav enter

Expected Behavior

Sidenav should not be open during sidenav enter

Environment

• Angular: 8
• CDK/Material: 8
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): OSX High Sierra

[benjaminkimble]

While it's still an issue I think needs to be fixed, I ran into this myself and have a workaround that may help other people out for now. If your situation allows, lazy loading (seen at bottom of docs page: https://material.angular.io/components/expansion/overview) and explicitly directing the panels to be closed with <mat-expansion-panel [expanded]="false">, they'll render closed, initially. At least they did for me. I still think it's a bug, but given how long it takes to fix things sometimes, it's probably better than waiting around if you need it.

[lukasbuehler]

If your situation allows, lazy loading (seen at bottom of docs page: https://material.angular.io/components/expansion/overview) and explicitly directing the panels to be closed with <mat-expansion-panel [expanded]="false">, they'll render closed, initially.

So the workaround worked for me when I surrounded the content of the expansion panel with:

<ng-template matExpansionPanelContent>
    Your content
</ng-template>

You should end up with your panel looking something like this:

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

As suggested by @benjaminkimble and seen in the docs under as seen in https://material.angular.io/components/expansion/overview#lazy-rendering.

A big improvement for me but it's not perfect because the padding-top or margin-top is changing now when it would show the content of the expansion panel before.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}