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 — abdullahkady
– abdullahkady, Commented Nov 26, 2018 at 18:31

Kaashan · Accepted Answer · 2018-11-26 19:02:02Z

4

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, 2018 at 19:02

Kaashan

3821 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Biax20 Over a year ago

But what if it was a <a> tag? I tried this it kinda works but it is not clickable.

Kaashan Over a year ago

it should work with proper formatting, check this

Collectives™ on Stack Overflow

Treating output from a database as HTML code within angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related