Styling [innerHTML] Content with Angular

Image by Hans Braxmeier from Pixabay

Scenario

We are including content like this:

<div class="content" [innerHTML]="topic.html"></div>

And styling the paragraphs in topic.html like this:

p {
   color: red;
}

However the paragraph text is not turning red.

Approach

First import ViewEncapsulation :

import { ViewEncapsulation } from '@angular/core'

Then use encapsulation: ViewEncapsulation.None :

@Component({
selector: 'app-topic',
templateUrl: './topic.component.html',
styleUrls: ['./topic.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TopicComponent ..

On the component in order to switch off View Encapsulation for the components content.

Bonus

The same technique can be used to style content embedded with ng-content .