Угловой.Как передать динамическую составляющую в ячейку таблицы матов?

Question

У меня есть эта конфигурация столбца для таблицы материалов:

columns = [
    { columnDef: 'firstName', header: 'FirstName',    cell: (user) => `${user.firstName}` },
    { columnDef: 'lastName',     header: 'LastName',   cell: (user) => `${user.lastName}`     },
    { columnDef: 'mobile',   header: 'Mobile', cell: (user) => `${user.mobile}`   },
    { columnDef: 'email',   header: 'Email', cell: (user) => `${user.email}`   },
  ];

И я хочу сделать матовую таблицу через цикл ngFor, например:

<mat-table #table [dataSource]="dataSource">

    <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
      <mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
      <mat-cell *cdkCellDef="let row">{{ column.cell(row) }}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

Все хорошо, но чтоесли я хочу передать HTML-шаблон или компонент в ячейку таблицы, например, если я хочу столбец, где будет кнопка, чтобы открыть диалоговое окно редактирования пользователя.

Я пробовал таким образом:

  <mat-cell *cdkCellDef="let row" [innerHTML]="<test-component></test-component> | safeHTML"></mat-cell>

и компонент:

@Component({
  selector: 'test-component',
  template: `  
      <button (click)="openEditDialog()">test</button>
  `,
})
export class TestComponent implements OnInit {

И это работает, но я не могу использовать привязку данных и, например, поместить некоторые данные в компонент через @Input.Что я делаю не так или у маубе есть другой подход для достижения этого?Был бы признателен за любой совет)