Render html in Angular Material Table cell

I am trying to add html content in angular material but the tags show as simple text in html
for example "first line <br> .here should be a new line"
How do I do it?

>Solution :

You can use innerHTML attribute binding

<td mat-cell 
  *matCellDef="let element"
  [innerHTML]="element.name">
</td>

TS

const ELEMENT_DATA: PeriodicElement[] = [
  {
    position: 1,
    name: '<b>Hydrogen</b> <br>Test', 
    ...
  },
  ...
];

Output

Position Name
1 Hydrogen
Test

Stackblitz

Leave a Reply