HTML is not being rendered when using [(ngModel)] in Chrome

See original GitHub issue

When I attempt to set the initial content for the editor with HTML, it replaces my HTML with a  tag and then my content, igoring the HTML elements I entered into the [(ngModel)]. This is happening in Chrome version 62, and I’m using Angular 4, ngx-quill 1.6.0.

HTML:

<quill-editor #wysiwyg [(ngModel)]="wysiwygContent"></quill-editor>

Typescript:

export class ClinicNoteComponent implements OnInit {
	wysiwygContent = '<ul><li>I am example content</li><li><u>Yo</u></li></ul>';
}

Result:

I am example contentYo

Thanks for any guidance.

Issue Analytics

State:
Created 6 years ago
Comments:17 (6 by maintainers)

Top GitHub Comments

4reactions

fayas668commented, Oct 8, 2019

<quill-editor [(ngModel)]=“wysiwygContent” name=“wysiwygContent” id=“wysiwygContent”></quill-editor>

@bMil21 try this It’s works for me.

3reactions

bMil21commented, Nov 30, 2017

Correct. My issue was a result of having the Quill Editor inside of an Angular Material tab, which was “flattening” it as  for some reason. I simply had to wait for the tab to be active/visible, before setting the [(ngModel)] for the editor.

Top Results From Across the Web

Why Angular's ng-model values are not reflected within web ...

Natively the value of an input is stored in the inputs node.value, it isn't something that you are going to be able to...

Property in ng-model not matching $scope.property in controller

I've got a property, pageSize, that is originally set in the controller, but can be updated through a select box. When I change...

Using NgModel With Input Type="File" And A Custom ...

Ben Nadel demonstrates how to create a custom ControlValueAccessor that targets File Inputs (type="file") and synchronizes File references ...

Angular ng-model Directive - W3Schools

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-model Directive. With the ng-model directive ...

Stack Overflow doesn't render some pages in Chrome with my ...

Not always the same content. So it appears to be a rendering issue. I can see HTML has loaded in the console. I...