0

I'm working on an angular blog app that uses ngx-quill as a text editor. I had no trouble adding records to my database. the problem occurs when I try to render content, it's not showing the data.

this is my details-post component HTML where I want to show content:

<article class="post" *ngIf="post$ | async as post; else loading">
<div class="post-thumbnail" style="background-image: url(&quot;https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80&quot;);" >
  <h1 class="post-title">{{ post.titlePost }}</h1>
  <div class="post-meta">February 20, 2020</div>
</div>

<div class="blog-post-content">
  {{ post.contentPost }}
</div>

</article>

<ng-template #loading>
  <div class="container-spinner">
    <mat-spinner></mat-spinner>
  </div>
</ng-template>
Faustoma
  • 29
  • 1
  • 3

1 Answers1

2

For ngx-quill you have to either use their own directive:

<quill-view [content]="content" format="text" theme="snow"></quill-view>

or innerHTML. More info here

<div class="ql-container ql-snow" style="border-width: 0;">
  <div class="ql-editor" [innerHTML]="byPassedHTMLString">
  </div>
</div>

I would suggest using their own directive.

Cheers

MrRobot
  • 1,001
  • 1
  • 14
  • 34
  • I tried using quill directive as you suggested but still not working. I wonder if you could share some example code for this configuration. – Faustoma Oct 20 '20 at 17:46
  • @Faustoma for sure! Here ya go https://stackblitz.com/edit/angular-ivy-grzbcw?file=src/app/app.component.ts – MrRobot Oct 21 '20 at 14:21