Angular Material Table Detail Rows expanding on their own when changing tabs

Question

I have a Mat-Table with detail rows in a Mat-Tab. The table works as desired until I choose another tab. When I switch back to the tab with the table, all of the detail rows are expanded.

<ng-container matColumnDef="expandedDetail">
    <mat-cell *matCellDef="let detail" style="padding-right: 0px;">
        <div class="mat-elevation-z8" fxFlex>
            <app-plants-list [company]="detail.element" [plants]="getPlants(detail.element.compCode)"
                [departments]="getDepartments(detail.element.compCode)" [areas]="getAreas(detail.element.compCode)"
                [jobs]="getJobs(detail.element.compCode)" [canManageOrganizations]="canManageOrganizations">
            </app-plants-list>
        </div>
    </mat-cell>
</ng-container>


<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" matRipple class="element-row"
    [class.expanded]="expandedElement == row" (click)="toggleDetailRow(row)"></mat-row>
<mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
    [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'" style="overflow: hidden">
</mat-row>

As you can see in the code, the detail row should not be expanded unless it matches the property 'expandedElement'.

Am I missing something that may be occurring with the HTML when switching tabs?

My guess is isExpansionDetialRow is set to allow expansion on refresh. You can create a debug directive to see that value at run time. Check this article out to do it. https://dev.to/jwp/angular-debugger-directive-13ob — JWP, May 13 '20 at 13:48
IsExpansionDetailRow just checks whether or not the row has the column name 'detailRow'. It is part of the when predicate that was required pre version 6. I found the answer. I'm about to post it — Irrelevant_Coder, May 13 '20 at 18:33

score 0 · Answer 1 · answered May 13 '20 at 19:00

After some more digging, I found this issue on GitHub that referred me to this StackBlitz, which helped me solve the problem.

I had my detail rows built using a design from prior to version 6, where detail rows were not supported. Now there is support for multiTemplateDataRows. The old way apparently didn't play nice with mat-tab (I'm sure the same problem would arise if we were using an expansion panel or similar).

Angular Material Table Detail Rows expanding on their own when changing tabs

1 Answers1