Style not working for innerHTML in Angular 9

💬 Tech Talks › Style not working for innerHTML in Angular 9

Chatra asked 3 years ago

I am passing html as innerHtml to my view. The below is my view


<div class="profile" [innerHTML]="someHtmlCode"></div>

if I pass the below code, it is working fine.


this.someHtmlCode = "<div class='title' ><b>This is my HTML.</b></div>"

and my css/scss is


.profile {
  .title {
    font-size: 20px;
    color: #000;
  }
}

The title color and font size are not getting applied.

Question Tags: angular9, scss

Rehmaanali Staff replied 2 years ago

@jose
you can use `::ng-deep.profile {}` to apply class inside innerHTML

Jose Pablo B. replied 2 years ago

I’m having the same problem, did you solve it?

1 Answers

Mdev answered 3 years ago

Probably you put the styles within a component which is shadow domed, you can turn off encapsulation or put styles in global style.