Expansión en material angular

Estoy usando Angular Material para mostrar contenido. Mi código TS es:

import { Component, OnInit, ViewChild } from '@angular/core';
import { AdminReassignTaskService } from 'src/app/services/admin-reassign-task.service'
import { Location } from '@angular/common';
import { trigger, state, transition, animate, style } from '@angular/animations';

@Component({
  selector: 'app-admin-reassign-task',
  templateUrl: './admin-reassign-task.component.html',
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
  styleUrls: ['./admin-reassign-task.component.scss']
})
export class AdminReassignTaskComponent implements OnInit {
  reassignedlist;
  columnsToDisplay =  ['test'];
  @ViewChild('expandedElement') expandedElement;
  displayedColumns = ['comment'];
  taskList;

  constructor(private serv: AdminReassignTaskService,public _location: Location) { }

  ngOnInit() {
    this.serv.getByURL('admin/list').subscribe(response => {
      this.reassignedlist=response;
    })
  }

  editReassigned(i,element){
    const result = [this.reassignedlist.find( ({ id }) => id === i )];
    this.taskList=result;
    this.expandedElement = this.expandedElement === element ? null : element ;
  }

}

Y mi código HTML es

<div class="main-content-wraper">
<ng-container>
      <div class="mat-elevation-z2 card rounded-0 p-3 d-flex flex-row flex-wrap" >
        <table mat-table [dataSource]="reassignedlist" multiTemplateDataRows class="mat-elevation-z8 w-100 custom-table">
          <ng-container matColumnDef="task_name">
            <th mat-header-cell *matHeaderCellDef> Task Name </th>
            <td mat-cell *matCellDef="let element"> {{element.taskName}} </td>
          </ng-container>  
          <ng-container matColumnDef="action">
            <th mat-header-cell *matHeaderCellDef>  </th>
            <td mat-cell *matCellDef="let element"> 
                <button mat-icon-button  matTooltip="View Task" (click)="editReassigned(element.id,element)" ><mat-icon >flag</mat-icon></button>
            </td>
          </ng-container>      

           <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
              <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                  <table mat-table [dataSource]="taskList" class="task-card" >
                      <ng-container matColumnDef="comment">
                        <th mat-header-cell *matHeaderCellDef> Assigned User Comment</th>
                        <td mat-cell *matCellDef="let element" matTooltip="Assigned User Comment"> {{element.assignedUserCmt}} </td>
                      </ng-container>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
              </div>
            </td>
          </ng-container>     

          <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
          <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
              class="example-element-row"
              [class.example-expanded-row]="expandedElement === element" >
          </tr>
          <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
        </table>    
    </div>
  </ng-container>
</div>

Con este código, la Tabla principal y el ICONO al hacer clic en la tabla principal La segunda tabla se expande y puedo ver los datos. Pero, 1) La segunda tabla no muestra el rumbo. ¿Cuál es la codificación incorrecta aquí? 2) Después de la tabla 2, quería agregar 4-5 campos de entrada de esta manera Expandir y contraer. ¿Cómo puedo AGREGAR sin mesa? 3) Aquí se adjunta la imagen (salida de la codificación actual). Por favor, avíseme si alguien tiene una respuesta con usted.

Creo que debe usar paneles de expansión como parte del acordeón de material angular:

https://stackblitz.com/angular/dnbkkoraexxa?file=src%2Fapp%2Fexpansion-overview-example.ts