Mock in Skeleton

Definitions

export type INews = {
  readonly img?: string;
  readonly date?: string;
  readonly title?: string;
  readonly url?: string;
};

Mock

Create a separate file, such a header.mock.ts in your project to store the mock data. You can define the mock data as an array of objects, similar to the actual data you expect to receive from an API.

import { INews } from './news.definitions';

export const MockNews: readonly INews[] = [
  {
    img: './assets/images/news/news-01.jpg',
    date: '19 Feb 2024',
    title: 'FIDE launches the ChessMom initiative',
    url: '#',
  },
  {
    img: './assets/images/news/news-02.jpg',
    date: '01 Feb 2024',
    title: 'Budapest gets ready for the 2024 Chess Olympiad',
    url: '#',
  }
];

Service

ng g s mock-data

Create a service to retrieve the mock data: Generate a service file using the Angular CLI to create a service that will provide the mock data to your components.

import { Injectable } from '@angular/core';
import { MockNews } from './news.mock';

@Injectable({
  providedIn: 'root',
})
export class NewsService {
  getMockData(): typeof MockNews {
    return MockNews;
  }
}

Compoment.ts

import { Component } from '@angular/core';
import { INews } from './news.definitions';
import { NewsService } from './news.service';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss'],
})
export class NewsComponent {
  mockData?: readonly INews[];

  constructor(private readonly newsService: NewsService) {}

  ngOnInit(): void {
    this.mockData = this.newsService.getMockData();
  }
}

HTML

<ul>
  <li *ngFor="let item of mockData">
    {{ item.title }}
  </li>
</ul>