1

I am using [innerHTML] binding to get some HTML content into a div, with a sanitizing pipe as described here.

I also need to be able to update the styles dynamically based on user input (font size, for example). I have been using [ngStyle] for other elements, but [ngStyle] does not seem to play well with [innerHTML]. The user can update the fontSizeVar, and the correct CSS can be found in the browser inspector, but the size of the [innerHTML] bound content never changes. Thoughts?

Template:

  <div class='content'
       [ngStyle]='{ "font-size": fontSizeVar }'
       [innerHTML]='description | safeHtml'>
  </div>
trex
  • 11
  • 4
  • Hmm...maybe create a whole new docfrag (or just element), styled up, and append it to a wrapping div (accessed as a ViewChild)? – Tim Consolazio May 08 '17 at 22:45
  • Seems to work OK in the current versions: https://embed.plnkr.co/FiQr8B/ – jonrsharpe May 08 '17 at 22:57
  • Might just be the case when your inner html not inheriting styles from its parent. Correct me if I am wrong, but ngStyle applies styles to the element it's in. – qwerty_igor May 08 '17 at 23:22
  • Looks like the [innerHTML] content wasn't inheriting correctly, the font-size was being fixed by some other css I was providing. Thanks for the help! – trex May 09 '17 at 14:30

1 Answers1

0

Thanks for the help, I wanted to leave an answer in case anyone else runs into this issue.

I had a stylesheet providing initial styles for the [innerHTML] bound content. [ngStyle] applies to the parent element, and will NOT override the styling of the child element if it is set explicitly. Removing the styling for the child element allowed the inheritance to work correctly, fixing my problem.

Thanks again!

trex
  • 11
  • 4