Ngx-quill: Cannot get html displaying in quill-editor

[zpydee]

[KillerCodeMonkey]

maybe some additional info like code, and what is happening?

[zpydee]

apologies. hit enter before I meant to. comilping message now...

[KillerCodeMonkey]

AAAAAAAAllllrighty then :D

[zpydee]

My app in Angular 7 currently.

the following screenshot is three components all linked to the same reactive forms control.

• Component 1: Simple bound angular material text-area. As you can see, its being updated after having interacted with your component.
• Component 2: your quill-editor component
• Component 3: your quill-view-html component

if you look at components 2 and 3, you'll notice that only some of the html is being rendered correctly:

• sup is working
• font-face is working
• u is working
• strong is working\
• ul>li is NOT WORKING

i have experienced similar issues with h1, h2 and other styles too.

I'm pretty sure the error is on my side - i must be using your lib incorrectly.

Pls advise.

My component is as simple as it can possibly be. (obviously want to get rid of quill-view-html....

html

<form [formGroup]="form">
    <quill-editor [formControlName]="control"> </quill-editor>
    <quill-view-html [content]="form.value[control]"></quill-view-html>
</form>

ts

import { Component, OnInit, Optional, Self, Input, ViewChild } from '@angular/core';
import { NgControl, FormGroup } from '@angular/forms';
import { QuillEditorComponent } from 'ngx-quill';

@Component({
    selector: 'forms-rich-text',
    templateUrl: './rich-text.component.html',
    styleUrls: ['./rich-text.component.css']
})
export class RichTextComponent {
    //// -------------------------------- ////
    //// Api
    //// -------------------------------- ////
    @Input() form: FormGroup;
    @Input() control: string;

    htmlString = '<h1>ping</h1>';
}

inputs passed from parent component:

parent

<forms-rich-text [form]="form" control="description"></forms-rich-text>

[KillerCodeMonkey]

no probs the view components are really new, so i hacked them together on the last weekend.

So it could be that i missed something.

just checkout my demo-repo and playaround with the view-html example component. if the problem is also existing there, so it is maybe a problem of mine.

[zpydee]

i don't want to be using view-html. would rather just use the editor. but its not behaving nicely.

[zpydee]

view-html is rendering everything. editor is not.

[KillerCodeMonkey]

aaahh you mean my view component is working, but the editor is not?

[zpydee]

correct.

[zpydee]

ps: love the real-time response dude.

[KillerCodeMonkey]

okay than i would guess you should check if some styles are overwritten by material?
because my view-html component just uses quilljs css and the output of the editor seems correct.

maybe material adds some style for something with an contenteditable attribute?

[zpydee]

my angular.json excerpt...

 "styles": [
                            "node_modules/quill/dist/quill.bubble.css",
                            "node_modules/quill/dist/quill.snow.css",
                            "libs/core/assets/themes.scss",
                            "libs/core/assets/icons.css",
                            "libs/core/assets/snackbar.css",
                            "libs/core/assets/styles.css",
                            "libs/shared/components/calendar/src/assets/styles.css",
                            "apps/papill-io/src/styles.css"
                        ],

[zpydee]

should i perhaps look for a ul > li style i'm overwriting?

[KillerCodeMonkey]

just inspect the editor element in your browser and check the css

right click on the page --> Inspect page. So you see the html and styling on the right.
select the editor element i think the div with the class .ql-editor and then check if there is something overriding the liststyling.

[zpydee]

if you look at your editor output, the <ul><li> is missing....

[KillerCodeMonkey]

https://killercodemonkey.github.io/ngx-quill-example/#html ??? i think there is everything in the editor. in the connected control/model and in the presentation..

Edit: Check if the ul li is stripped by angular and the sanitize input property of the ngx-quill editor.

[zpydee]

let me play some more...

[KillerCodeMonkey]

okay you passing the html from a database to the editor?

[zpydee]

yes, currently storing whatever your component outputs as a string (html)

[zpydee]

if you look at my "summay" field, that's exactly what I store....

[KillerCodeMonkey]

then maybe angular is stripping the html.

checkout the sanitize property of the editor component

[zpydee]

will do.

[zpydee]

PS: you should work on your docs a bit. It takes a long time to get to grips with the lib, and its a good one. You don't want to lose those users that aren't so committed to getting stuff right.

[KillerCodeMonkey]

i know... i know, but i am a single maintainer with a personal life and a full time job. ;)
So i am doing what i like and for what i want to invest my time.

That is why my docs in general are more "functional" :D.

Feel free to add a PR with a refactoring.

[zpydee]

if only I don't have my more that 16 hours a day dev job already :-)

[zpydee]

sanitize not helping. i'm going to have to explore. when I find the issue, i'll let you know. I'm sure it won't be an isolated issue, so maybe something you need to bullet proof.

[KillerCodeMonkey]

maybe you can create working example as stackblitz.

[zpydee]

cannot. app too complex to replicate. may well be an issue on my side though, so let me check...

[zpydee]

you've been really helpful, thank you.

[zpydee]

gonna close for now.

[KillerCodeMonkey]

feel free to post a solution if you got it!

[zpydee]

have inspected my code. sorry to say but i think your component is breaking the html. perhaps test lists? they render when modified in your component but not on reloads...

[KillerCodeMonkey]

but my demo repo is setting list code on load?

https://killercodemonkey.github.io/ngx-quill-example/#html

[zpydee]

i see that. don't know what to say, but not having joy.. i'll experiment a bit more later...

[KillerCodeMonkey]

try to reproduce the issue in a stackblitz. so i can easy take look over the code.

[zpydee]

if you look at my elements, your component is quite clearly rendering a <p> tag even though the stored string contains <ol><li>.

this is not a css issue or an angular sanitize issue.

[KillerCodeMonkey]

could you check if your tags are correctly encoded? Maybe you database escapes or encodes them.

Did you tried to hard code the content you pass?

[KillerCodeMonkey]

And important: your editor format is html? Maybe you accidentally have set the format to text or something else

i think this is an issue of your repo, because ngx-example is installed round about 25k times a week. And this issue never occurs.

[zpydee]

none of the above. i'm using firebase and the stored variable is a simple string (as displayed in my "test" summary field. i'd expect that to be appropriately parsed by your component. would you expect the same?

[zpydee]

i've left all your editor defaults.

<form [formGroup]="form"><quill-editor [formControlName]="control"> </quill-editor></form>

[zpydee]

also, why would some html parse and others not?

ie, my <u>, <strong> tags work but the list and heading tags do not?

[zpydee]

in my mind this tends to indicate an internal library error.

[KillerCodeMonkey]

yeah but please try it in a clean angular project or with a fixed string.

and btw, when you are using formGroup just use formControlName and the name of the control instead of dynamic bindings :)

in my mind this tends to indicate an internal library error.

but that is not how it works.. i provide an example where this is working. so when i am asking for code or live example you should bring it... not me.

So we can both guess, but that will not help ;)

[KillerCodeMonkey]

So i tried a little bit around, even with formGroup and control + patching the control value after some time, everything works:

@Component({
  selector: 'app-format-html',
  templateUrl: './format-html.component.html'
})
export class FormatHtmlComponent {
  form: FormGroup = this.fb.group({
    html: new FormControl('<div>test</div><ul><li>1</li><li class="ql-indent-1">1-1</li><li>2</li><ol><li>numbered</li><li class="ql-indent-1">numbered-1</li></ol></ul><div><br></div>')
  })

  constructor(private sanitizer: DomSanitizer, private fb: FormBuilder) {}

  ngOnInit() {
    setTimeout(() => {
      this.form.get('html').patchValue('<ol><li><sup>test</sup></li></ol>')
    }, 4000)
  }

  byPassHTML(html: string) {
    return this.sanitizer.bypassSecurityTrustHtml(html)
  }
}

<h3 id="html">Format - HTML</h3>
<pre>
  <code>
    {{ form.get('html').value }}
  </code>
</pre>

Presentation in HTML
<div class="ql-container ql-snow" style="border-width: 0;">
  <div style="width: 100%" class="ql-editor" [innerHTML]="byPassHTML(form.get('html').value)">.   </div>
</div>

<form [formGroup]="form">
  <quill-editor format="html" formControlName="html"></quill-editor>
</form>

[KillerCodeMonkey]

Just try to store the JSON string of the content in your database (format="json"), it is smaller an considered more stable + no XSS issues.

[zpydee]

ok, good news. i've reapplied my rich-text-component (which uses your lib) in my core app environment and it seems to work.

the way we've architected is that all our apps work off a "core" base, which is all the features we need for the app shell, authentication, subscription management, etc and then we build app features on top of this.

so, the problem is definitely on my side, for one of my specific apps.

I must tell you that the real-time support I've received from you over the last day is amazing. Never experienced this from any other lib provider. Well done!!

When I find the problem causing the issue in my app, I'll be sure to let you know what it was to help others prevent it as well.

[KillerCodeMonkey]

Nice. Hope you get it working soon :)

I close this issue, but feel free to inform me how you solved it

[zpydee]

so, this is a very interesting issue. it actually seems to be related to angular's async pipe. once I have more information, i'll send it to you

[zpydee]

i have the component working correctly now, but to be honest - I'm not sure why...

if you want I'm happy to jump on a skype call to show you what changes made the difference. I suspect there may be something internal that causing angular + rxjs to reject something within your lib.

[KillerCodeMonkey]

@zpydee
x-files intro starts playing

[zpydee]

lol

[zpydee]

there's definitely some sort of reactive issue. perhaps a race issue on a timeout? i noticed in your earlier code you sent me that you used a timeout.

[zpydee]

does you lib completely embrace observables?

[KillerCodeMonkey]

i added the timeout example to the ngx-quill-example repo.

I think so, because it implements the angular ControlAccessor and runs in there.
If there would be some issue, it should not update the content at all, but not stripping html tags

[zpydee]

yeah, it's a weird one. in my case, literally moving divs with *ngIf="x$ | async; let x up in the html made the component work.

Odd, no?

[KillerCodeMonkey]

i must say, i do not like the asyncPipe and i would never implement such stuff in a framework.

just subscribe in ngOnInit and unsubscribe in ngOnDestroy if you have uncompleted subscriptions.
So you know when your data is there and when it is gone.

No template logic and unit testable code.

[zpydee]

disagree with that. async pipe does exactly what you just described, with no extras. also, polluting ts with unnecessary OnInit and OnDestroy methods just pollutes components and makes them more difficult to maintain.

the error i experienced may well be an inherent angular bug, but I hope my experience over the last two days gives you some info about an advanced usage of your lib. mine is a big app. your demos are "theoretical". they represent the easiest usage of your lib, not necessarily real world applications.

i'd really suggest looking into the way your code consumes rxjs.

[KillerCodeMonkey]

my lib does not use anything from rxjs (explicit).
It just uses standard angular functionalities.

disagree with that. async pipe does exactly what you just described, with no extras. also, polluting ts with unnecessary OnInit and OnDestroy methods just pollutes components and makes them more difficult to maintain.

Yeah, but most angular developers are not looking behind the scenes, what is really happening.

If you are using libs/frameworks with view caching - e.g. ionic - component are not destroyed in many cases, because they are cached. so you are polluting the dom and change detection cycles with unwanted data ;).

I like to see what is happening instead of pushing such things to the template.

Even the "maintain" argument is invalid. In most cases you are using this hooks beside the data fetching.

And it is only my opinion ;).

[zpydee]

nice working with you bud. and thanks for the wrapper. i'll use it in my app.

[eBitzu]

For me the problem was that using material design, kinda screw things up, so if you have like tabs and so on, please make them lazyload.

<mat-tab>
    <ng-template matTabContent>
        <quill-editor></quill-editor>
    </ng-template>
</ng-template>

[KillerCodeMonkey]

nice! thanks

[ersaurabh101]

I have tried the above code, it is still not taking styles like color

below is the code i am trying

    setTimeout(() => {
      this.form.get('html').patchValue('<p style="color:blue;">test.....</p>')
    }, 4000)

Its been 6 hours playing with this now, please help if possible

[KillerCodeMonkey]

you know quilljs uses class based styling per default. if you want to use inline css checkout the quilljs documentation https://quilljs.com/guides/how-to-customize-quill/#class-vs-inline

[ersaurabh101]

How do i make sure in line syles like this one - https://codepen.io/ersaurabh101/pen/YzywbgR , when i copy in quill looks same in ionic ? can you guide me what do i need to do in ionic ?

[AjeetEppa]

Hi, I tried this,

str = this._DomSanitizationService.bypassSecurityTrustHtml(
    `<p style="color: red;">anything</p>`
  );

<quill-editor
  [ngModel]="str"
  [sanitize]="true"
></quill-editor>

Still not setting color to red, this maybe because of what you said above.
But could you pls state a way to get this working? because, this is how I will be getting my html and passing it to quill-editor

[KillerCodeMonkey]

Quill is using CSS classes dir Styling and mit inline Styling and in it
only allows known Formats / Tags.

So you cannot expect that every HTML Code is working.

Check quilljs documentation If you want to Switch from class based Styling
to inline Styling

Ajeet [e-mail] schrieb am Fr., 17. Apr. 2020, 14:03:

Hi, I tried this,

str = this._DomSanitizationService.bypassSecurityTrustHtml(
<p style="color: red;">anything</p>
);

[ngModel]="str"
[sanitize]="'true"

Still not setting color to red, this maybe because of what you said above.
But could you pls state a way to get this working? because, this is how I
will be getting my html and passing it to quill-editor

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/404#issuecomment-615206805,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AARI4YA6VYLOV5Y2JELE44DRNBAPNANCNFSM4H3H26YA
.

[AjeetEppa]

Thanks for your response.
But How do I register it in Angular?
I belive this is where you wanted me to go

[KillerCodeMonkey]

You do IT The Same way. Check my Demo repo how i Register custom Formats or
add new fonts

Ajeet [e-mail] schrieb am Fr., 17. Apr. 2020, 14:32:

Thanks for your response.
But How do I register it in Angular?
I belive this is where you wanted me to go
[image: image]
https://user-images.githubusercontent.com/48122590/79569567-70f95800-80d5-11ea-947c-2277bdda6e57.png

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/404#issuecomment-615218628,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AARI4YGUXZ64W6UECSJRHWLRNBD6HANCNFSM4H3H26YA
.

[AhmadNetDevelper]

using Reactive Forms ......
in HTML File .......

<quill-editor [formControl]="_FrmAddNew.get('EmailContentAr')" [styles]="{height: '200px'}">
</quill-editor> 

in ts File ......

  ngInitialControlForm() {
    this._FrmAddNew = this.formb.group({
      Id: [0],
      EmailContentAr:['']
    });
  }

[KillerCodeMonkey]

@AhmadNetDevelper "thumbing up" your own comment, which i need to format... come on :D

[emanuelevivoli]

Hi @KillerCodeMonkey , really great project 😎.
Actually I get this error both on the quill-editor and the quill-view.
Yes, I get my "stringifyied-html" by promise, and the things is that I'd like to use it with runtime updates on it (the html stays on my db as string, and other people can change it at any time).

How do you suggest to manage it?
Actually the html is correct but quill-editor and quill-view don't show the content properly.

I just add a thing: while writing it looks perfect, only after fetching the stringifyied-html it start not good looking. If you want some code, I can provide it.

wait for advice, thanks ✌️

[KillerCodeMonkey]

what error Oo i only see a screenshot. could you explain it in detail? Or create a demo on stackblitz where i can see the problem.

[emanuelevivoli]

Hi, sorry, I thought it was understandable from the context, my fault.
The error is that my html-string says something, but my quill-editor is not showing the same thing (as you can see, the first red row must be h1, and so on).

I put some code to make it more understandable:

reactive-form.component.ts

@Component({ ... })
export class ReactiveFormsComponent implements OnInit {
    @Input() data: BehaviorSubject<string>; // this is the html
    form: FormGroup;

    @ViewChild('matEditor', { static: true })
    matEditor: MatQuill;

    constructor(fb: FormBuilder) {
        this.form = fb.group({  matEditor: ['']  });
    }

    ngOnInit(): void {
        this.data.subscribe((data: string) => {
            this.form.get('matEditor').patchValue(data);
            // tried also -> this.form.controls.matEditor.setValue(data);
        });
    }
}

reactive-form.component.html

<form [formGroup]="form">
    <quill-editor formControlName="matEditor"> </quill-editor>
    <!--  i tried also with *format="html"* -->
</form>

<pre>{{form.controls.matEditor.value}}</pre>

and the result is what you can see in the screenshot, the elements have their tag (like <h1>, <ul>, <li>) but none of those is rendered as it should be.
Actually all of those are as they were just <div>, in fact (as you can see from the screenshot below) after a change the formControl shows how they are rendered: just <div>

Btw, I'll work on setting up a stackblitz to see if I can reproduce it.

[KillerCodeMonkey]

Keep in mind, that quill only allows Tags and Formats or already knows. You
can Not Pass custom HTML and expect that quilljs renders IT correctly.

Just check IT Out in my Demo repo.

Immanuel [e-mail] schrieb am Fr., 22. Mai 2020, 20:23:

Hi, sorry, I though was understandable from the context, my fault.
The error is that my html-string says something, but my quill-editor is
not showing the same thing (as you can see, the first red row must be h1,
and so on).

I try put some code to make it more understandable:

reactive-form.component.ts

@Component({ ... })export class ReactiveFormsComponent implements OnInit {
@Input() data: BehaviorSubject; // this is the html
form: FormGroup;

@ViewChild('matEditor', { static: true })
matEditor: MatQuill;

constructor(fb: FormBuilder) {
    this.form = fb.group({  matEditor: ['']  });
}

ngOnInit(): void {
    this.data.subscribe((data: string) => {
        this.form.get('matEditor').patchValue(data);
        // tried also -> this.form.controls.matEditor.setValue(data);
    });
}}

reactive-form.component.html

{{form.controls.matEditor.value}}

and the result is what you can see in the screenshot, the elements have
their tag (like

,

,
• ) but none of those is rendered as it
  should be.
  Actually all of those are as they were just
  , in fact (as you can
  see from the screenshot below) after a change the formControl shows how
  they are rendered: just

  [image: Screenshot 2020-05-22 at 20 20 45]
  https://user-images.githubusercontent.com/9447991/82697729-bfb48780-9c69-11ea-8fea-b1cb951fc429.png

  Btw, I'll work on setting up a stackblitz to see if I can reproduce it.

  —
  You are receiving this because you were mentioned.
  Reply to this email directly, view it on GitHub
  https://github.com/KillerCodeMonkey/ngx-quill/issues/404#issuecomment-632839536,
  or unsubscribe
  https://github.com/notifications/unsubscribe-auth/AARI4YAOW33LMHDVEGDRQULRS27IPANCNFSM4H3H26YA
  .

[emanuelevivoli]

Hi, I'm using your Demo repo, actually I'm using the reactive-form and the view-html components. What I see is that the string to render is just composed by <h1>, <ol>, <li> and <span> which I thought were html tag and not custom.
In your example everything is working (with html-view), I set a time Interval where change the html string every sec, and it renders well.

Anyway, I changed in my example the format to format='json' and all worked perfectly. So I guess I had some formatting-html problem neither in the saving step nor in the fetching step, but somewhere in the presentational step.

Thanks for your help, bye

[awais2080]

thanks @KillerCodeMonkey such a great work, although i had to read all questions answers and going through different sources,

your htmlEditButton is great but lack proper documentation for angular.

so for those using this for angular 10 you just need to copy past these lines after installing quill and htmlEditButton.

app.module.ts

import { QuillModule } from 'ngx-quill';

import * as QuillNamespace from 'quill';
const Quill: any = QuillNamespace;
import { htmlEditButton } from 'quill-html-edit-button';
Quill.register('modules/htmlEditButton', htmlEditButton);

QuillModule.forRoot({
      modules: {
        htmlEditButton: {
          debug: false, // logging, default:false
          msg: 'Edit the content in HTML format',
          okText: 'Ok', // Text to display in the OK button, default: Ok,
          cancelText: 'Cancel', // Text to display in the cancel button, default: Cancel
          buttonHTML: '&lt;&gt;', // Text to display in the toolbar button, default: <>
          buttonTitle: 'Show HTML source',
          // Text to display as the tooltip for the toolbar button, default: Show HTML source
          syntax: false,
        },
      },
    }),

[dipandanny]

I am having the same issue.
Here is my code,
In app.componnet.ts:

    DirectionAttribute = Quill.import('attributors/attribute/direction');

    AlignClass = Quill.import('attributors/class/align');
    BackgroundClass = Quill.import('attributors/class/background');
    ColorClass = Quill.import('attributors/class/color');
    DirectionClass = Quill.import('attributors/class/direction');
    FontClass = Quill.import('attributors/class/font');
    SizeClass = Quill.import('attributors/class/size');
    AlignStyle = Quill.import('attributors/style/align');
    BackgroundStyle = Quill.import('attributors/style/background');
    ColorStyle = Quill.import('attributors/style/color');
    DirectionStyle = Quill.import('attributors/style/direction');
    FontStyle = Quill.import('attributors/style/font');
    SizeStyle = Quill.import('attributors/style/size');
    Quill.register(this.DirectionAttribute, true);
    Quill.register(this.AlignClass, true);
    Quill.register(this.BackgroundClass, true);
    Quill.register(this.ColorClass, true);
    Quill.register(this.DirectionClass, true);
    Quill.register(this.FontClass, true);
    Quill.register(this.SizeClass, true);
    Quill.register(this.AlignStyle, true);
    Quill.register(this.BackgroundStyle, true);
    Quill.register(this.ColorStyle, true);
    Quill.register(this.DirectionStyle, true);
    Quill.register(this.FontStyle, true);
    this.editorModules = {
      toolbar: [
        [{ size: ['12px', '13px', '14px', '16px', '18px', '20px', '24px', '36px'] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        [{ list: 'ordered'}, { list: 'bullet' }],
        [{ script: 'sub'}, { script: 'super' }],      // superscript/subscript
        [{ indent: '-1'}, { indent: '+1' }],          // outdent/indent
        [{ color: [] }, { background: [] }],          // dropdown with defaults from theme
      ]
    };
    ngOnInit(): void {
        body = '<p><strong style="font-size: 18px; background-color: rgb(255, 153, 0); color: rgb(187, 187, 187);"><em><u>Test Test Tes</u></em></strong></p>'
    }

In html:

                  <quill-editor #editor
                        [(ngModel)]="body"
                        sanitize="false"
                        [styles]="editorStyle"
                        maxLength="1000"
                        [required]="ifEditorRequired"
                        [modules]="editorModules"
                        (onEditorChanged)="editorChanged($event)"
                        (onEditorCreated)="editorCreated($event)"
                        trimOnValidation="false"
                        (onFocus)="onEditorFocus($event)"
                        (onBlur)="onEditorBlur($event)">
                    </quill-editor>

This is what I expect the editor to show

This is what the editor actually shows. All inline stylings are lost.

Update:
I think my issue has something to do with Angular security check, I do see the warning WARNING: sanitizing HTML stripped some content, see http://g.co/ng/security#xss from console.
Any tip to get around angular security check? @KillerCodeMonkey
I have tried this.body = this.domSanitizer.sanitize(SecurityContext.HTML, this.body) but it removes all inline styling.
I have also tried this.body = (this.domSanitizer.bypassSecurityTrustHtml(this.body) as any).changingThisBreaksApplicationSecurity but this does not help.

[KillerCodeMonkey]

santizing is a boolean value if you pass the string "false" it is truthy ;-)

[sanitize]="false"

[vokilam-d]

I'm having same issue. Narrowed it down to using *ngIf with content projection.
Have a repro example on stackblitz:
https://stackblitz.com/edit/angular-qvlzwv?file=src/app/spoiler.component.ts

1. AppComponent creates form control with html as value (4 paragraphs <p>)
2. AppComponent template inserts quill editor into child component SpoilerComponent using content projection
3. By default, inside SpoilerComponent hide <ng-content> using *ngIf
4. Show projected content providing truthy value to *ngIf.
5. See that html value in editor is now rendered as single-line text in 1 paragraph <p>

After that you can in stackblitz change default value of isVisible to true and see that text is rendered as expected - as 4 <p> paragraphs.

My use case for such a structure:
Back-office with a lot of inputs on a single page.
Page becomes really slow (because of the quantity of DOM nodes).
So I grouped this inputs into the sections (custom angular components, like SpoilerComponent from stackblitz) and provided them with functionality with hiding elements via *ngIf.
As a result: lesser DOM nodes - the page is much more responsive.

[ranickpatra]

For me the problem was that using material design, kinda screw things up, so if you have like tabs and so on, please make them lazyload.

<mat-tab>
  <ng-template matTabContent>
      <quill-editor></quill-editor>
  </ng-template>
</ng-template>

It also works for me