single.html

<!--
  Generated template for the SinglePage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>single</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>

  <ion-card *ngFor="let data of datas">

    <ion-item *ngFor="let author of data._embedded.author">
      <ion-avatar item-left>
        <img src="{{author.avatar_urls['24']}}"/>
      </ion-avatar>
      <h2>{{author.name}}</h2>
      <p>
        {{data.date | date:'dd/MM/yyyy'}}
      </p>
    </ion-item>

    <div *ngFor="let thumbnail of data._embedded['wo:featuredmedia']">
      <img
        src="{{thumbnail.media_details.sizes.full.source_url}}"
        *ngIf="thumbnail.source_url"/>
    </div>

    <ion-card-content>
      <ion-card-title>{{data.title.rendered}}</ion-card-title>
      <div [innerHTML]="data.content.rendered">
        {{data.content.rendered}}
      </div>
    </ion-card-content>

    <button full primary
      (click)="openCommentPage(data._links.replies[0].href)"
    >COMMENT</button>

  </ion-card>

  <ion-card>
    <ion-card-header class="comment">
      <h1>COMMENT</h1>
    </ion-card-header>
    <div class="comment-item" *ngFor="let comment of comments">
      <ion-item>
        <ion-avatar item-left>
          <img src="{{comment.author_avatar_urls[24]}}"/>
        </ion-avatar>
        <h2>{{comment.author_name}}</h2>
        <p>
          {{comment.date | date:'dd/MM/yyyy'}}
        </p>
      </ion-item>

      <ion-card-content>
        <div [innerHTML]="comment.content.rendered">
          {{comment.content.rendered}}
        </div>
      </ion-card-content>

    </div>
  </ion-card>

</ion-content>