Search code examples
javascriptangularinnerhtml

Angular v2.4.7 [innerHtml] and [ngStyle] on the same element

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>
Solution

  • 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!