Render html content inside *ngFor loop in ionic2/angular2 project [duplicate]

Question

in a ionic2 project I need to render some html content inside a tag in a *ngFor loop.

here my template:

<ion-content padding>
<ion-list>
    <ion-item *ngFor="let post of posts">
        <ion-thumbnail item-left>
            <lazy-img src="{{post.thumbnail}}"></lazy-img>
        </ion-thumbnail>
        <h2>{{post.title}}</h2>
        <p>{{post.content}}</p>
        <button ion-button clear item-right (click)="viewPage(post)">View</button>
    </ion-item>
</ion-list>

inside post.content i have some html tags. how can i render it correctly?

Answer 1

Use innerHTML:

<p [innerHTML]="post.content"></p>

Note: if there's some potentially unsafe code in your HTML, you will have to use DomSanitizer.