0

I have a component with encapsulationset to ViewEncapsulation.None and a property named question which contains text from server call, which might contain HTML tags like 

<strong>Main Question</strong> and some more text

in my view I use the property like this 

...
<p [innerHTML]="question"></p>
...

and the produced HTML is 

<p>
   <strong>Main Question</strong> and some more text
</p>

but the thing is that strong tag apart from the semantics should also make the text bold, which doesn't happen.

1) Why this happens and browser does not render it correctly? 2) which is the correct way to fix it?

I know there are similar questions but they couldn't help.

Angular Version Used: Angular 2.4.7

Steve
  • 11,596
  • 7
  • 39
  • 53
koninos
  • 4,969
  • 5
  • 28
  • 47
  • Can't seem to reproduce this issue. Can you check to make sure `` CSS isn't being overridden? **Test Plunker:** https://plnkr.co/edit/JDGy9D4aIcsEHTqgSb9e?p=preview – Steve Mar 31 '17 at 15:18
  • I use Angular 2.4.7, maybe in v4 is fixed? – koninos Mar 31 '17 at 15:24
  • Seems to work as far back as v2.2.1 (Sorry... Couldn't find a plnkr template with your exact version). **Test Plunker:** http://plnkr.co/edit/896uxDLqtRWlnhZkHipQ?p=preview – Steve Mar 31 '17 at 15:39
  • Ok, converted that last one to v2.4.7 and still works: http://plnkr.co/edit/qGGnIE4RthyAyAiCSH6R?p=preview Maybe try to create your own plnkr to try to reproduce the issue? – Steve Mar 31 '17 at 15:46
  • I don't have a clue why this doesn't work on me. I have a much more complicated structure and embeded templates than this simple component but this shouldn't matter. Thanks for bothering. – koninos Mar 31 '17 at 15:52
  • No worries. Feel free to @mention me here for help if you can narrow it down a bit. – Steve Mar 31 '17 at 15:53
  • Are you using Polymer with `angular-polymer` by any chance? I know it's been known to cause issues with exactly that (innerHTML directive not working) https://github.com/platosha/angular-polymer/issues/137 – David M. Mar 31 '17 at 17:40

0 Answers0