stefansheva

import { Component, OnInit, OnDestroy } from '@angular/core';
import { PageService } from 'src/services/page.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  contents: any = [];

stefansheva

.page-section {
    padding: 6rem 0;
}

.page-section h2.section-heading {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

stefansheva

<section class="page-section bg-light" id="portfolio">
  <div class="container">
        <div class="text-center">
            <h2 class="section-heading text-uppercase">{{page.name}}</h2>
            <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
        </div>
        <h4>{{page.contents[0].title}}</h4>
        <div>{{page.contents[0].value}}</div>
        <br/>
      <app-post></app-post>

stefansheva

import { Component, OnInit } from '@angular/core';
import { PostService } from 'src/services/post.service';

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss']
})
export class PostComponent implements OnInit {
  posts: any = [];

stefansheva

#post .post-item {
    max-width: 25rem;
}

#post .post-item .post-caption {
    padding: 1.5rem;
    text-align: center;
    background-color: #f6f6f6;
}

stefansheva

<div class="row">
    <div *ngFor="let post of posts" class="col-lg-4 col-md-4 col-sm-6">
        <div class="post-item">
            <a class="post-link">
                <img class="img-fluid" src="http://localhost:1337{{post.contents[0].coverImage.url}}" alt="" /></a>
            <div class="post-caption">
                <div class="post-caption-heading">{{post.contents[0].title}}</div>
                <div class="post-caption-subheading text-muted">{{post.contents[0].value}}</div>
            </div>
        </div>

stefansheva

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ContentService {

stefansheva

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PostService {

stefansheva

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PageService {