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
.