Render html in Angular Material Table cell

Question

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?

Answer 1

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