angular2 property contains dom in template binding

Question

I'm trying to displaying data from wordpress site in angular2 app, the wordpress post's content can contain DOM elements, but I want to render it instead of displaying it as a text.

I'm using rest API V2 plugin to get the posts from wordpress.

Home.ts

import {Component, NgFor} from 'angular2/angular2';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {RouterLink, ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';


@Component({
 selector: 'home',
 viewProviders: [HTTP_PROVIDERS],
 templateUrl: './app/home/home.html',
   directives: [NgFor, ROUTER_DIRECTIVES]
})
export class HomeCmp {
 posts: Array<any>;
 constructor(http: Http) {
  http.get('http://localhost/wptest/wp-json/wp/v2/posts').subscribe(res => {
   this.posts = <any>res.json();
  });
 }
}

<h1>I'm home page</h1>

<ul>
  <li *ng-for="#post of posts" class="post-item">
    <a [router-link]="['/Post', {id: post.id}]">
      <h3 class="post-title">
      {{post.title.rendered}}
    </h3>
      <p class="post-excerpt">
        {{post.excerpt.rendered}}
      </p>
      <div class="post-thumbnail"></div>
    </a>
  </li>
</ul>

I've answered it before (see [this answer](http://stackoverflow.com/a/33476189/4933038)) so it's quite redundant and I'm extremely lazy, lol. So you can answer it yourself if you want to. — Eric Martinez, Nov 22 '15 at 16:48

Murhaf Sousli · Accepted Answer · 2017-08-30T13:16:04.890

1

<p class="post-excerpt" [innerHtml]="post.excerpt.rendered"></p>

Answered by Eric Martinez

edited Aug 30 '17 at 13:16

answered Nov 22 '15 at 18:21

Murhaf Sousli

12,622
20
119
185

angular2 property contains dom in template binding

1 Answers1

Linked