Styling [ innerHTML ] Content with Angular | Task

Ole Ersoy
Jan - 30  -  1 min

Scenario

We want to style paragraphs in innerHTML content:

The CSS rule does not turn the paragraphs red:

p { color: 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.