Angular 6 Firestore: render string embedded with HTML tags ... without displaying tags

Question

Angular 6

Firestore

I have a blog article object stored in Firestore. I'm using a wysiwyg editor to edit and save article.content, which is a string, to the database. When article.content is saved, it looks like this:

"<p>Some content.<p><br><p>More content</p>"

It renders that way too, un-styled, showing all of the HTML tags.

How do I render this so that the content is styled by the tags and the tags are not displayed?

Here is the code.

# article-detail-component.ts

export class ArticleDetailComponent {
  articlesCollection: AngularFirestoreCollection<Article>;
  article: any;
  id: any;

  constructor (private route: ActivatedRoute,
               private afs: AngularFirestore) {
      this.articlesCollection = this.afs.collection('articles');
      this.route.params.subscribe(params => {
          this.id = params['id'];
      });
      this.articlesCollection.doc(`${this.id}`).ref.get().then((doc) => {
        this.article = doc.data();
      });
  }
}

# article-detail-component.html

<app-ngx-editor [(ngModel)]="article.content"></app-ngx-editor>
<hr>
<div>
  {{article.content}}
</div>

Answer 1

Bind the data to the innerHTML property to render the dynamic HTML in the view:

<div [innerHTML]="article.content"></div>