0

My API is returning HTML content (I want it to - it has to). I want to render this content in Angular 2/7 as HTML.

Right now, I have

<div class="card-container" [ngClass]="type === 'bot' ? 'white' : 'blue'">
    <div class="header" >
        <b>{{name}}</b> 
        {{date}}
    </div>
    <ng-content></ng-content>
</div>

The goal here is to have ng-content rendered as HTML.

For context, ng-content is something like this Test Date: Mon, Nov 19

And this component is called chat-card.component

And it's a parent is called chat-card-area.component

<div class="right-child">
    <app-chat-card type={{type}}>
        <ng-content></ng-content>
    </app-chat-card>
</div>

And the parent if chat-card-area is simply chat.component, which has

<div *ngFor="let message of messages">
    <app-chat-card-area type={{message.type}}>
    {{message.text}} // I want this to be rendered as html
    </app-chat-card-area>
</div>

Any idea of how to do this?

Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
Asool
  • 13,031
  • 7
  • 35
  • 49
  • 2
    Possible duplicate of [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) – chairmanmow Nov 19 '18 at 16:44

1 Answers1

2

Use innerHTML binding here as:-

<div *ngFor="let message of messages">
    <app-chat-card-area type={{message.type}}>
      <div [innerHTML]="message.text"></div> // Will render as HTML
    </app-chat-card-area>
</div>
Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65