How to keep styles while using Angular innerHtml?

Question

I am building an application where I need to inject some html from the .ts file to the .html file in Angular. I am using the following code for that.

.ts

..
export class ConclusionPageComponent implements OnInit {
  ..
  pageContent: SafeHtml;
  ..
  ngOnInit() {
    ..
    this.pageContent = this.sanitizer.bypassSecurityTrustHtml(data.data.step_data.data.content);
    ..
  }
}

.html

<div class="container-fluid ">
    <div class="row">
        <div class="col" [innerHtml]="pageContent">
        </div>
    </div>
</div>

.scss

.emphasis {
    font-style: italics;
    font-weight: bold;
}

There are some there are some html elements in pageContent with the class .emphasis, but the style in the .emphasis class is not getting applied. Actually, even the class is not getting applied to the elements (I've checked via inspect element.) I am also using some Angular material elements in pageContent and the material style is not getting applied to these elements. If I keep an Angular material element in the .html file itself, the Angular material styles are getting applied to it.

So, the main problem is that the css classes are not getting applied to the innerHtml I am injecting from .ts. How to fix this problem?

Just marking the html safe doesn't help. Setting ViewEncapsulation.None still doesn't help with the Angular material styles.

Edit: Stackblitz of a simpler version of the problem.

https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling checkout this if this can help you. — Avinash Dalvi, Oct 29 '19 at 06:41
@aviboy2006 I've seen that answer. ng-deep is going to be deprecated and ::slotted is not supported in Edge yet. — Outsider, Oct 29 '19 at 07:42
create something like this. https://stackblitz.com/edit/angular-input-keydown-event — Avinash Dalvi, Oct 29 '19 at 11:38
@aviboy2006 Extremely sorry for posting the wrong link. I have updated it. — Outsider, Oct 29 '19 at 11:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/201543/discussion-between-aviboy2006-and-arka-ghosh). — Avinash Dalvi, Oct 29 '19 at 11:59

How to keep styles while using Angular innerHtml?

0 Answers0