Развернуть и свернуть строку при нажатии кнопки, которая находится в строке таблицы td in mat

        <table mat-table [dataSource]="dataSource" multiTemplateDataRows matSort class="mat-elevation-z8">

                <!-- Document Column -->
                <ng-container matColumnDef="document">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Document </th>
                    <td mat-cell *matCellDef="let search; let i = index">
                        <button mat-button (click)="expandedElement = expandedElement === search ? null : search">Show
                            Log</button>
                        <!-- {{search.document}} -->
                    </td>
                </ng-container>

                    <!-- more containers -->
        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
            <ng-container matColumnDef="expandedDetail">
                <td mat-cell *matCellDef="let search" [attr.colspan]="displayedColumns.length">
                    <div class="example-element-detail"
                        [@detailExpand]="search == expandedElement ? 'expanded' : 'collapsed'">
                        <div class="example-element-description">
                            <div class="">
                                <div class="">
                                    <pre> {{search.document}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let search; columns: displayedColumns;" class="example-element-row"
                [class.example-expanded-row]="expandedElement === search"
                (click)="expandedElement = expandedElement === search ? null : search">`enter code here`
            </tr>
            <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
        </table>

У меня есть матовая таблица с кнопкой в ​​столбце в каждой строке (как показано в общем коде выше). Я ищу расширение и свертывание строки (по одному) при переключении кнопок.

содержимое в ts-файле:

import { Component, OnInit, AfterContentInit, ViewChild } from '@angular/core';
//other component imports
import { MatTableDataSource, MatPaginator } from '@angular/material';
import {animate, state, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class SearchComponent implements OnInit {
  displayedColumns: string[] = ['document', 'timestamp', 'conversationId', 'microserviceName', 'responseStatusCode', 'host', 'clusterName', 'elapsedDuration'];
//other useful declarations
  expandedElement: SearchResponse | null;

  // set observables into datasource using MatTableDataSource
  public dataSource = new MatTableDataSource<SearchResponse>();

  constructor(private appService: AppService,
                    private toastr: ToastrService) { }
  ngOnInit() {
    //service call
  }
  //service call and functions
}

Не удалось выяснить, почему переключение кнопок не работает, а строка по умолчанию расширяется.