CODEWITHSUNDEEP
javascriptangularangular-material2
Alexander Mills
Alexander Mills

Reputation: 100000

Prevent rendering inner html for expansion panels that are unopened

I have the following HTML:

  <mat-expansion-panel class="selected-history-panel" *ngFor="let e of elements;" [hideToggle]="hideToggle">

   <mat-expansion-panel-header>{{e.uuid}}</mat-expansion-panel-header>

    <div>
      <app-history-item-tab-group></app-history-item-tab-group>
    </div>

     <mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>

     <mat-action-row *ngIf="true">
       <button mat-button>DELETE ITEM 1</button>
     </mat-action-row>

     <mat-action-row *ngIf="showButtons.checked">
       <button mat-button (click)="panel3.expanded = false">DELETE ITEM 2</button>
     </mat-action-row>

  </mat-expansion-panel>

I have about 50 elements in the array.

This view take awhile to load - I assume because it's rendering the inner content of each expandable panel. Is there a way to conditionally render the innert content using an *ngIf perhaps?

Upvotes: 1

Views: 712

Answers (1)

Alexander Mills
Alexander Mills

Reputation: 100000

So I made these changes, and from what I can tell, the rendering is much faster:

  <mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">

    <div style="overflow-y: scroll; max-height: 80vh;">

      <mat-expansion-panel #daPanel class="selected-history-panel" *ngFor="let e of elements;" [hideToggle]="hideToggle">

          <mat-expansion-panel-header>{{e.uuid}}</mat-expansion-panel-header>

          <div *ngIf="daPanel.expanded === true">
            <app-history-item-tab-group></app-history-item-tab-group>
          </div>

          <mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>

          <mat-action-row *ngIf="true">
            <button mat-button>DELETE ITEM 1</button>
          </mat-action-row>

          <mat-action-row *ngIf="showButtons.checked">
            <button mat-button (click)="panel3.expanded = false">DELETE ITEM 2</button>
          </mat-action-row>

      </mat-expansion-panel>

    </div>


  </mat-accordion>

the changes are to add #daPanel and an *ngIf

Upvotes: 1

Related Questions