Treating output from a database as HTML code within angular

Question

I'm creating a front end application which looks at a database of Hearthstone cards allowing you to sort and search them. However, the Text displayed on the cards (Within the database) has HTML formatting within it such as  

EG: The card "Toxic Arrow" has a text field containing:

Deal $2 damage to a minion. If it survives, give it Poisonous.

currently the rendering function looks as follows:

 `<tr *ngFor = "let card of cards">
     <td> {{card.text}} </td>
     <td> <img [src] = 'card.img'
         [title] = 'card.name'
         [style.width.px] = ImageWidth> </td>
  </tr> `

and currently the output within the table shows this: Deal $2 damage to a minion. If it survives, give it Poisonous.

I'm looking for a way to format this text quickly inside this loop to remove the $ and use the already existing HTML  tag

I'm not using the older AngularJs, I'm using the most current up to date version of Angular.

This has been answered many times, you will need to implement a pipe to allow the HTML (make it safe), check it here for instance: [question](https://stackoverflow.com/questions/51856903/angular-html-binding-not-working) — abdullahkady, Nov 26 '18 at 18:31

score 3 · Answer 1 · answered Nov 26 '18 at 19:02

3

You can replace the first <td> in your code with <td [innerHTML]="card.text"> </td>. This will cause the text to be displayed with HTML formatting as per the tags present in the input string.

answered Nov 26 '18 at 19:02

Kaashan

352
3
12

But what if it was a tag? I tried this it kinda works but it is not clickable. – Biax20 Dec 01 '22 at 11:34
it should work with proper formatting, check [this](https://stackoverflow.com/questions/71698434/i-want-to-embed-an-anchor-tag-into-innerhtml-using-angular-but-it-doesnt-recog) – Kaashan Dec 13 '22 at 12:35

Treating output from a database as HTML code within angular

1 Answers1

Linked