Angular 5 table row expand/collpse one at a time

Question

Trying angular table row expand/collapse one at a time but unable to make it work.

Tried below url but it seem to be not working. Any help is appreciated. https://plnkr.co/edit/rLtjjMOpEUe8owK8KI2M?p=preview https://github.com/angular/material2/issues/6095

 <mat-row *matRowDef="let row; columns: displayedColumns;"
           matRipple
           class="element-row"
           [class.expanded]="expandedElement == row"
           (click)="expandedElement = row">
   </mat-row>

   <mat-row *matRowDef="let row; columns: row; columns: ['expandedDetail']; when: isExpansionDetailRow"

      (click)="getMetadata(row.description, row.capability_id)"
         class="element-row"
                 [matDetailRow]="row" [matDetailRowTpl]="tpl">
    </mat-row>

</mat-table>

<ng-template #tpl let-element>
    <div [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'" style="overflow: hidden">
      <div *ngFor='let team of metadata | async'>
      <ul>
        <li>Team Lead:  {{team.team_lead}}</li>
      </ul>
     </div>     
    </div>
  </ng-template>

  In Component:
  isExpansionDetailRow = (i: number, row: any) => 
          row.hasOwnProperty('detailRow');

Answer 1

Try to collapse all rows before expanding. And Expand the selected row, Below code will help you to deal with your suituation.

toggleExpandRow(row) {
        // console.log('Toggled Expand Row!', row);
        this.table.rowDetail.collapseAllRows();
        this.table.rowDetail.toggleExpandRow(row);
      }