import { Component, OnInit } from '@angular/core';
import {butterService} from '../../services/buttercms.service';
@Component({
  selector: 'app-posts',
  templateUrl: './posts.page.html',
  styleUrls: ['./posts.page.scss'],
})
export class PostsPage implements OnInit {

  constructor() { }
  posts: any;
  ngOnInit() {
    butterService.post.list({
                page: 1,
                page_size: 10
            })
            .then((res) => {
                console.log('Content from ButterCMS');
                console.log(res);
                this.posts = res.data.data;
            });
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>Posts</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content *ngIf="posts">
<ion-card *ngFor="let post of posts">
  <ion-card-header >
    <img src="{{post.featured_image}}" height="100px"/>
    <ion-card-title>{{post.title}}</ion-card-title>
    <ion-card-subtitle>Published on: {{post.created|date:'MM/dd/yyyy'}}</ion-card-subtitle>

  </ion-card-header>

  <ion-card-content>
    {{post.summary}}<br>
    <ion-button href="/posts/{{post.url}}">Read more</ion-button>
  </ion-card-content>

</ion-card>
<ion-button href="/home">Back</ion-button>
</ion-content>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {map, take} from 'rxjs/operators';
import {Observable} from 'rxjs';
import {butterService} from '../../../services/buttercms.service';
@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss'],
})
export class PostComponent implements OnInit {

  constructor(protected route: ActivatedRoute) {
    }

    protected slug$: Observable<any>;
    public post = {
        meta: null,
        data: null
    };

    ngOnInit() {
        this.slug$ = this.route.paramMap
            .pipe(
                map(params => (params.get('slug')))
            );

        this.slug$.pipe(
            take(1))
            .subscribe(slug => {
                butterService.post.retrieve(slug)
                    .then((res) => {
                    console.log(res.data);
                        this.post = res.data.data;
                    }).catch((res) => {
                    console.log(res);
                });
            });
    }

}

<ion-header>
  <ion-toolbar>
    <ion-title *ngIf="post">{{post.title}}</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>

    <ion-img [src]="post.featured_image"></ion-img>
    <h1>{{post.title}}</h1>
    <span>Published on: {{post.created|date:'MM/dd/yyyy'}}</span>

    <div [innerHTML]="post.body"></div>
    
<ion-button href="/posts">Back</ion-button>
</ion-content>