0

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

john
  • 23
  • 6

1 Answers1

0

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.

Nick
  • 66
  • 5
  • what i want to do is to render a string to html tag. currently on the table i have as a string the html tag, it doesnt translate the string to html tag @Nick – john Jun 06 '22 at 09:17
  • 1
    Something like:
    Is that what you're looking for? Plop that in the cell, don't forget to sanitize it.     – Nick Jun 08 '22 at 06:08
  • innerHtml is not valid in mat table by security – john Jun 08 '22 at 07:33
  • Sorry I can't really help you without some context. Are you [sanitizing](https://stackoverflow.com/questions/39681163/angular-2-sanitizing-html-stripped-some-content-with-div-id-this-is-bug-or-fe) the HTML? I don't think this is specific to mat-table – Nick Jun 08 '22 at 07:56
  • i want to include a dot icon/svg/css with custom color whatever is possible to a mat cell! @Nick – john Jun 11 '22 at 17:03