Unable to pass styles to quill-editor component in angular

Question

I'm trying to style a tag in app.component.html from app.component.ts but its not working.There are similar questions and articles but even the accepted answers ain't working for me. Here is my code.

app.component.html

<div class="container">
  <div class="row pt-5">
    <div class="col-md-12 col-lg-12 col-sm-12 bg-light">
      <form [formGroup]="editorForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="editor">
            <h3>Editor</h3>
          </label>
          <quill-editor [style]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>
        </div>
        <button class="btn btn-primary mt-3">Submit</button>
      </form>
    </div>
  </div>
</div>

And my app.component.ts is

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  editorForm: FormGroup;

  editorStyle = {
    height: '300px',
    backgroundColor: '#ffffff'
  }

  config = {
    toolbar: [
      ['bold', 'italic', 'underline'],
      ['code-block']
    ]
  }

  ngOnInit() {
    this.editorForm = new FormGroup({
      'editor': new FormControl(null)
    })
  }

  onSubmit() {
    console.log('submit called');
    console.log(this.editorForm.get('editor').value);
  }
}

Things I tried:

[style]="editorStyle" //Not working

Then I tried doing it directly [style.backgroundColor]="'red'" with and without extra quotes aroud value [style.backgroundColor]='red'.

I also tried [ngStyle]="{backgroundColor: 'red'}" and [ngStyle.backgroundColor]="'red'"'. But nothing is working for me. The problem is only with editorStyle and not with config. I'm also getting this warning.

WARNING: sanitizing unsafe style value [object Object] (see http://g.co/ng/security#xss).

Answer 1

Quill editor uses a custom styles field to pass down styling, so instead of

<quill-editor [style]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>

You should specify

<quill-editor [styles]="editorStyle" [modules]="config" formControlName="editor"></quill-editor>

This is different to the styling a standard dom element

https://github.com/KillerCodeMonkey/ngx-quill