mat-expansion-panel keeps contents of collapsed panels in DOM

[mik01aj]

I found this while debugging rendering performance in my app. I have a large section that initially renders as a big mat-expansion-panel with all panels collapsed, except one. Here is a screenshot of mat-expansion-panel demo that sxhibits the same behavior:

I believe that the contents of the collapsed sections should be removed from the DOM to not slow down the application by rendering content that isn't currently visible.

If the reason for doing that was animations, then the animations probably need fixing - Angular supports keeping things in DOM while they are animating. Or maybe this was used, but the animation end never gets registered? I'm gussing :) In any case I believe it's a bug.

CC @jelbourn

Possilbly related (?): #8287

[crisbeto]

We have the ability to render expansion panel content lazily the first time it is opened. See https://material.angular.io/components/expansion/overview#lazy-rendering.

[mik01aj]

Thanks for the response. This looks very useful. I'll probably solve the problem for us.

[jelbourn]

@wagnermaciel FWIW I still think we should change the default to work the same as tabs- not in the DOM when not rendered by default, with an option to preserve content once rendered

[mfishma]

My understanding of the intention was for SEO and page indexing. While hidden, the HTML contents should still be indexable because they are still part of the page when the page loads. This is true for Angular Universal server-side-rendering. Understanding that there are workarounds, it should be noted that if this default behavior changes, there is a small chance it could mean lost revenue because important content is no longer indexed and a page may no longer be found by a search.

[jelbourn]

Thinking about this more, it might make sense to have a consistent set of options for content-switching components. Probably options like:

• always in dom
• only active view in dom
• persist in dom only after a view becomes active

This would make sense for tabs, stepper, expansion panel, and drawer/sidenav

[s4m0r4m4]

+1 to @jelbourn's latest suggestion. I've long wrangled with the different loading strategies across content-switching components - how they behave differently and how only some can be configured. I often find myself having to go back to the docs to remind myself of the different loading strategies and what can and cannot be configured.

Having a consistent set of options across all the content-switching components would be a big plus for me. Perhaps I'd even go as far to say have a consistent default behavior across them all. Easier to remember for developers.

One final note here while I'm writing - currently the loading strategy, for a tab group for example, is configured by nesting each tab content in it's own ng-template. This isn't the end of the world, but boy I'd sure love to see something like:

<mat-tab-group [load-strategy]="always/onlyWhenActive/alwaysAfterActive">
...
</mat-tab-group>.

The attribute could be on the tab group or individual tabs, doesn't really matter to me. The important thing is that this way my code editor could give me auto-complete on the property name and I don't have to try and remember if it was ng-template, ng-container, or some other wrapper I need to use. Just food for thought if you plan to do some work in this area.

[lukfel]

I found this issue after trying to research my non rendered content by the Googlebot within mat-tabs in a mat-tab-group. Even though my web-app is a JavaScript SPA, Googlebot manages to pretty much fetch all content (texts, images, styles, links, etc.). However, the only content Googlebot cannot fetch is within mat-tabs.

Since @s4m0r4m4 mentioned "loading strategies across content-switching components" I was wondering if the way the mat-tab-group works prevents Googlebot from finding its content.

This is the mat-tab-group:

<mat-tab-group>

  <!-- Tab 1 - products -->
  <mat-tab label="Active products">
    <h2>Active products</h2>
    <div *ngIf="products$ | async as products" class="tab-products">
      <div *ngFor="let product of products">
        <product-component [product]></product-component>
      </div>
    </div>
  </mat-tab>

  <!-- Tab 2 - user info -->
  <mat-tab label="User info">
    <!-- Desciption -->
    <h2>User info</h2>
    <p class="tab-user-text" [innerText]="user.description"></p>

</mat-tab-group>

Googlebot screenshot:

The product-component is properly rendered by Googlebot when it is outside of the mat-tab-group.

[wagnermaciel]

Just providing a quick update here. I haven't had a chance to revisit this but the last time I looked at this I couldn't get things to work without breaking the expansion animation. I'll try and dedicate some time to this soon!

[Burgov]

My solution:

Instead of

  <mat-expansion-panel *ngFor="let connection of connections">
    <mat-expansion-panel-header>{{ connection.connectionId }}</mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      <app-connection-form [connectionId]="connection.id"></app-connection-form>
    </ng-template>
  </mat-expansion-panel>

use

  <mat-expansion-panel #panel *ngFor="let connection of connections">
    <mat-expansion-panel-header>{{ connection.connectionId }}</mat-expansion-panel-header>

    <ng-container *ngIf="panel.expanded">
      <app-connection-form [connectionId]="connection.id"></app-connection-form>
    </ng-container>
  </mat-expansion-panel>