0

Hello I am trying to bind an HTML string into my div it contains tags too. Bold strings normal strings showing without any problem but my tags coming as string.

I am using ng-bind-html with ngSanitize

<div flex style="width:100%;height:100%;background-color:white" ng-bind-html="news_detail">

</div>

My HTML content is 

<p>NBA'de sezon, Golden State Warriors'ın Cleveland Cavaliers'ı 4-0'la geçip şampiyon olmasıyla birlikte tamamlandı. Biz de her NBA takımının, geride bıraktığımız sezonda ne yaptığına dair ufak değerlendirmeler kaleme almaya karar verdik. Bugün, Atlantik Grubu'nu ele alacağız.</p><p>&lt;img src='http://i68.tinypic.com/2zoxmx3.jpg'/&gt;</p><p><strong>Toronto Raptors</strong></p>

It is showing like this exactly

NBA'de sezon, Golden State Warriors'ın Cleveland Cavaliers'ı 4-0'la geçip şampiyon olmasıyla birlikte tamamlandı. Biz de her NBA takımının, geride bıraktığımız sezonda ne yaptığına dair ufak değerlendirmeler kaleme almaya karar verdik. Bugün, Atlantik Grubu'nu ele alacağız.

<img src='http://i68.tinypic.com/2zoxmx3.jpg'/>

Toronto Raptors

How can I show img tags ?

Suat Karabacak
  • 643
  • 2
  • 7
  • 24
  • is this the actual code? or the output? `

    NBA'de sezon, Golden State Warriors'ın Cleveland Cavaliers'ı 4-0'la geçip şampiyon olmasıyla birlikte tamamlandı. Biz de her NBA takımının, geride bıraktığımız sezonda ne yaptığına dair ufak değerlendirmeler kaleme almaya karar verdik. Bugün, Atlantik Grubu'nu ele alacağız.

    <img src='http://i68.tinypic.com/2zoxmx3.jpg'/>

    Toronto Raptors

    `     – Cârnăciov Jun 11 '18 at 18:44
  • @aron9forever this is actual HTML content which I want to show in my div, stored in database as string – Suat Karabacak Jun 11 '18 at 18:45
  • 1
    `<img src='http://i68.tinypic.com/2zoxmx3.jpg'/>` I guess that's supposed to be `` then – Cârnăciov Jun 11 '18 at 18:46
  • did you try [innerHTML] or safeHTML pipe? check this out: https://stackoverflow.com/questions/34585453/how-to-bind-raw-html-in-angular2 – Eray T Jun 11 '18 at 18:56
  • @aron9forever that did the trick – Suat Karabacak Jun 18 '18 at 10:14

1 Answers1

0

Your HTML string being pulled from your database has the img tags escaped so they are not being treated as HTML. You need to change the string to be properly written HTML, for example:

Old string:

<p>NBA'de sezon ...</p><p>&lt;img src='http://i68.tinypic.com/2zoxmx3.jpg'/&gt;</p><p><strong>Toronto Raptors</strong></p>

New string:

<p>NBA'de sezon, ...</p><p><img src='http://i68.tinypic.com/2zoxmx3.jpg'/></p><p><strong>Toronto Raptors</strong></p>
mpallansch
  • 1,174
  • 6
  • 16
  • $scope.replaced_content = $scope.news.text_content.replace(/</g, '<');$scope.replaced_content = $scope.replaced_content.replace(/\/>/g, '>'); worked just fine – Suat Karabacak Jun 18 '18 at 10:17