Рендеринг нг-контента в формате HTML - Angular 2

Question

Мой API возвращает html-контент (я хочу это - должен).Я хочу отобразить этот контент в Angular 2/7 как html.

Прямо сейчас у меня есть

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

Цель здесь состоит в том, чтобы нг-контент отображался как html.

Для контекста, ng-контент выглядит примерно так Тест Дата: понедельник, 19 ноября

И этот компонент называется chat-card.component

И этоparent называется chat-card-area.component

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

И родитель, если chat-card-area это просто chat.component, который имеет

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

Любое представление о том, каксделать это?

Answer 1

Используйте innerHTML привязку здесь как: -

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