How to use css class in the innerHtml binding in angular

Credit goes to this link:

http://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling

“Angular adds all kinds of CSS classes to the HTML it adds to the DOM to emulate shadow DOM CSS encapsulation to prevent styles of bleeding in and out of components. Angular also rewrites the CSS you add to match these added classes. For HTML added using [innerHTML] these classes are not added and the rewritten CSS doesn’t match.”

As a workaround try

  • for CSS added to the component
:host /deep/ mySelector {
  background-color: blue;
}
  • for CSS added to index.html
body /deep/ mySelector {
  background-color: green;
}

Advertisements