I have this column config for material table:
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}` },
];
And i want to make mat table throught ngFor cycle, like this:
<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>
Everything is fine, but what if i want to pass some html template or component in table cell, for example if i want column, where will be button to open user-edit dialog.
I've tried in this way:
<mat-cell *cdkCellDef="let row" [innerHTML]="<test-component></test-component> | safeHTML"></mat-cell>
and the component:
@Component({
selector: 'test-component',
template: `
<button (click)="openEditDialog()">test</button>
`,
})
export class TestComponent implements OnInit {
And it works, but i can't use data binding and, for example put some data to component through @Input. What am doing wrong or maube there is another approach to achieve it? Would be appreciate for any advice)
