How do I add custom styling to a small part of Angular Material Table cell?

Question

I want to change the color of the text displayed in a cell of a Material Table. I have an array as my datasource where type is MatTableDataSource. Some cells have regular text in them, like rubber ducky. I want to be able to change the color of part of that string, lets say duck. My first idea was to add a span with some class that would do that, but the table won't let me add HTML tags, so when i do, I get the whole tag showing up as a text. Is there a solution to this issue?

To summarize:

Problem - change color of part of text in Angular Material table (MatTableDataSource)

Failed attempt - insert span tag around text that needed styling. didn't work because table will display tags as regular text.

Looking for other suggestions. Thanks!

Do you want to change color of all cells or for specific cell ? — GaurangDhorda
I realize my problem is how angular resolves {{}}, and when i add html in there, it will display the html as plain text — solar apricot
So now, its fine working and you dont need any solution for this problem ? Or you are still looking for solution to this question ? — GaurangDhorda
i just figured it out (after i replied here). I am using <span [innerHtml]='myvar'></span> instead of {{myvar}}. This solved it. Do you have a different approach? — solar apricot

solar apricot solar apricot · Accepted Answer · 2021-05-21T13:24:18

Using <span [innerHtml]='myvar'> instead of {{myvar}} solved it. I am not sure if there is a better solution

How do I add custom styling to a small part of Angular Material Table cell?

1 Answers