Mock Cover

export interface Cover {
  caption: Caption;
  image: Image;
}

export interface Caption {
  title: string;
  subtitle: string;
  text: string;
  btnLabel: string;
  btnLink: string;
}

export interface Image {
  src: string;
  alt: string;
}

import { Cover } from './cover.model';

export const MockCover: Cover = {
  caption: {
    title: '',
    text: '',
    btnLabel: '',
    btnLink: ''
  },
  image: {
    src: '',
    alt: '',
  },
};

import { Injectable } from '@angular/core';
import { MockCover } from '../components/cover/cover.mock';

@Injectable({
  providedIn: 'root',
})
export class MockService {
  constructor() {}

  getMockData() {
    return MockCover;
  }
}

export class CoverComponent {
  mockData?: Cover;

  constructor(private mockService: MockService) {
    this.mockData = this.mockService.getMockData();
  }
}

<div class="cover">
  <div class="cover-caption">
    <h1 class="cover-title">{{ mockData?.caption?.title }}</h1>
    <p class="cover-description">
      {{ mockData?.caption?.subtitle }}
    </p>
    <p class="cover-text">
      {{ mockData?.caption?.text }}
    </p>
    <app-button
      [btnLabel]="mockData?.caption?.btnLabel"
      [btnLink]="mockData?.caption?.btnLink"
    ></app-button>
  </div>
  <figure class="cover-figure">
    <img
      class="cover-image"
      [src]="mockData?.image?.src"
      [alt]="mockData?.image?.alt"
    />
  </figure>
</div>