Table with expandable rows open all rows at once

Question

I would like to create table with expandable rows. Something like this: https://stackblitz.com/angular/oyybnyopyemm?file=app%2Ftable-expandable-rows-example.ts

In my table all rows open and close at once after click. For example I can't expand(open) only one row.

My *.html

<div *ngIf="clients$ | async as clients">
  <div class="flex-p">
    <table mat-table [dataSource]="clients.content" class="mat-elevation-z8" multiTemplateDataRows>
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element.id }} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element.name }} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="email">
        <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element.email }} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="vehicles">
        <mat-header-cell *matHeaderCellDef> pojazdy </mat-header-cell>
        <mat-cell *matCellDef="let element">{{ element.vehicles }} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="update">
        <mat-header-cell *matHeaderCellDef> Zmien Dane </mat-header-cell>
        <mat-cell *matCellDef="let element">
          <button (click)="update(element)" mat-icon-button color="primary">
            <mat-icon>update</mat-icon>
          </button>
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="addVehicle">
        <mat-header-cell *matHeaderCellDef> Dodaj pojazd </mat-header-cell>
        <mat-cell *matCellDef="let element">
          <button (click)="addVehicle()" mat-icon-button color="primary">
            <mat-icon>directions_car</mat-icon>
          </button>
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="delete">
        <mat-header-cell *matHeaderCellDef> Usun </mat-header-cell>
        <mat-cell *matCellDef="let element">
          <button (click)="delete(element.id)" mat-icon-button color="warn">
            <mat-icon>delete_forever</mat-icon>
          </button>
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="expandedDetail">
        <mat-cell *matCellDef="let detail">
          {{detail.name}}
        </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)="expandedElement === row? expandedElement = null : expandedElement = row"></mat-row>
      <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
        [@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'" style="overflow: hidden">
      </mat-row>
    </table>
    <div>
      <div style="display:inline">
        <button (click)="openModal()" type="submit" class="button" mat-raised-button color="primary">
          Dodaj klienta
        </button>
      </div>
      <div style="display:inline">
        <mat-paginator (page)="changePage($event)" [length]="clients.totalElements" [pageSize]="clients.size"
          [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
      </div>
    </div>
  </div>
</div>

My *ts

 @Component({
  selector: 'app-client-list',
  templateUrl: './client-list.component.html',
  styleUrls: ['./client-list.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('expanded', style({ height: '*', visibility: 'visible' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ]
})
export class ClientListComponent implements OnInit {
  displayedColumns: string[] = ["id", "name", "email", "vehicles", "update", "addVehicle", "delete"]
  expandedElement: any
  isExpansionDetailRow = (i: number, row: Object) => {
    return row.hasOwnProperty('name');

  }
  @Select(state => state.client.pageClientDto)
  clients$: Observable<PageClientDto>

  constructor(public store: Store, public matDialog: MatDialog) { }

  ngOnInit() {
    this.store.dispatch(new ClietnPageAction(0, 5))
  }

  changePage(event) {
    this.store.dispatch(new ClietnPageAction(event.pageIndex, event.pageSize))
  }

Where I should look for a bug.

Answer 1

You need to update with this part

[@detailExpand]="(element == expandedElement || allRowsExpanded) ? 'expanded' : 'collapsed'"

Check this out

stackBlitz