将 ng-content 呈现为 html - Angular 2

Question

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 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?

Answer 1

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>