Angular material insert html string

Question

Is there a way i can insert a whole html string from typescript for example:

I need this as each time info is of a different HTML type

 const ELEMENT_DATA: PeriodicElement[] = [
     {
    position: 1,
    info: '<span class="colorMe"> {{information}} </span>', 
    
  },
 {
    position: 2,
    info : '<img [src]="element.imageUrl" />', 
    
  },
  ...
];`

And html:
<td mat-cell 
  *matCellDef="let element">{{element.info}}
</td>

score 1 · Accepted Answer · answered Aug 10 '22 at 11:27

1

you can do it like this: <div [innerHTML]="element.info"></div>

maybe you need to sanitize your HTML first

answered Aug 10 '22 at 11:27

Zerotwelve

2,087
1
9
24

it will be sanitized anywy. – Antoniossss Aug 10 '22 at 12:14
It shows {{information}} instead of showing its value. ( I tried with sanitization as well) – Anna Aug 11 '22 at 07:51
it's working with modification in assigning values to table `` and `The size is ${ this.information }` – Anna Aug 11 '22 at 08:08

Angular material insert html string

1 Answers1