htmlcssangularhtml-listsexeccommand

Angular: <ol> added by document.execCommand sees only css rules in styles.css but not in the component's css

I am creating rich text editor in angular and when I execute document.execCommand('insertOrderedList') I get <ol> item which is unaffected by my component's css, only css in styles.css (main css file in the root of the project) affects items I am adding with document.execCommand. Is it possible to change this behavior?

Solution

  • Sure. The name for it is view encapsulation. Changing it to ViewEncapsulation.none would make the desired behavior.

    @Component({
  ...
  encapsulation: ViewEncapsulation.none
})