Render html tag within mat-table cell

Question

i am trying to find a way to render an html tag inside a mat-table cell using angular. The reason im trying to do this is because i want to render a colored circle next of a cell value. I didnt find any working solution online so I would really appreciate if anyone could help!

Thank you

Answer 1

When looking at the Angular Material Documentation for the table you will notice an extensive list of table directives that extend the respective cdk directives. The one you're looking for is MatCellDef .

This is a structural directive so be sure to prefix it with an asterisk (*matCellDef).

<ng-container matColumnDef="myColName">
  <td mat-cell *matCellDef="let element"> --> insert your circle <-- {{ el.value }} </td>
</ng-container>

You can add anything you want inside of the mat-cell and it will be rendered there for cells in that column.