Example for Definitions and Mock

Definitions

export type CardDefinitions = {
    mainData: MainData,
    cardPackage: CardCategory[]
}

export type CardCategory = {
    cardCat: string,
    cardData: CardData[]
}

export type CardData = {
    cardTitle: string;
    cardText: string;
    cardImg?: string;
    cardColor: string;
}

export type MainData = {
    mainTitle: string;
    mainLead: string;
    mainImg: string;
}

Mock

import { CardDefinitions } from './app.definitions'; 

export const CardMock:CardDefinitions = {
    mainData: {
        mainTitle: 'Totális káosz! Szinte lehetetlenség lesz közlekedni mától Budapesten',
        mainLead: 'Mától fejre áll szinte az egész város közlekedése, szívnak az autósok és a tömegközlekedők is. Lezárják a budai alsó rakpartot a Lánchíd felújítása miatt, de a 2-es villamos és a 3-as metró közlekedésében is lesz változás.',
        mainImg: 'https://metropol.hu/wp-content/uploads/2022/06/5636819b004a637f0f5cd64ae5da529d22309d0collageImage.jpeg'
    },
    cardPackage: [
        {
            cardCat: 'Category 1',
            cardData: [
                { 
                    cardTitle: '[cat-1] Ez érint minden budapesti autóst is! Így autózhatunk lejárt forgalmival',
                    cardText: 'Vészesen közeleg a lejárt okmányokkal kapcsolatos türelmi idő vége, de nem kell megijedni, van még egy kis haladék a forgalmi érvényességét illetően.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2022/05/392601420220530bentinkutforgalmi4114MKMP-scaled.jpg',
                    cardColor: 'dark'
                },
                {
                    cardTitle: '[cat-1] A magyar emberek pénztárcáját kell a háborús inflációtól megkímélni',
                    cardText: 'Elsősorban a magyar emberek pénztárcáját kell a háborús inflációtól megkímélni – jelentette ki Szentkirályi Alexandra kormányszóvivő az M1 aktuális csatorna hétfő reggeli műsorában.',
                    cardImg: '',
                    cardColor: 'light'
                },
                { 
                    cardTitle: '[cat-1] Gondoltad volna? A magyarok 62 százaléka harcolna, ha megtámadnák hazánkat',
                    cardText: 'A Publicus Intézet május 26–30. között 1004 fő megkérdezésével készített országos reprezentatív közvélemény-kutatásban kérdezte az embereket arról, hogy mit tennének, ha Magyarország háborúba keveredne.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2020/09/5f575e717ebc7151718983FOTOhonvedelemhu-1.jpg',
                    cardColor: 'dark'
                },
            ]
        },
        {
            cardCat: 'Category 2',
            cardData: [
                { 
                    cardTitle: '[cat-2] Ez érint minden budapesti autóst is! Így autózhatunk lejárt forgalmival',
                    cardText: 'Vészesen közeleg a lejárt okmányokkal kapcsolatos türelmi idő vége, de nem kell megijedni, van még egy kis haladék a forgalmi érvényességét illetően.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2022/05/392601420220530bentinkutforgalmi4114MKMP-scaled.jpg',
                    cardColor: 'dark'
                },
                {
                    cardTitle: '[cat-2] A magyar emberek pénztárcáját kell a háborús inflációtól megkímélni',
                    cardText: 'Elsősorban a magyar emberek pénztárcáját kell a háborús inflációtól megkímélni – jelentette ki Szentkirályi Alexandra kormányszóvivő az M1 aktuális csatorna hétfő reggeli műsorában.',
                    cardImg: '',
                    cardColor: 'light'
                },
                { 
                    cardTitle: '[cat-2] Gondoltad volna? A magyarok 62 százaléka harcolna, ha megtámadnák hazánkat',
                    cardText: 'A Publicus Intézet május 26–30. között 1004 fő megkérdezésével készített országos reprezentatív közvélemény-kutatásban kérdezte az embereket arról, hogy mit tennének, ha Magyarország háborúba keveredne.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2020/09/5f575e717ebc7151718983FOTOhonvedelemhu-1.jpg',
                    cardColor: 'dark'
                },
            ]
        },
        {
            cardCat: 'Category 3',
            cardData: [
                { 
                    cardTitle: '[cat-3] Ez érint minden budapesti autóst is! Így autózhatunk lejárt forgalmival',
                    cardText: 'Vészesen közeleg a lejárt okmányokkal kapcsolatos türelmi idő vége, de nem kell megijedni, van még egy kis haladék a forgalmi érvényességét illetően.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2022/05/392601420220530bentinkutforgalmi4114MKMP-scaled.jpg',
                    cardColor: 'dark'
                },
                {
                    cardTitle: '[cat-3] A magyar emberek pénztárcáját kell a háborús inflációtól megkímélni',
                    cardText: 'Elsősorban a magyar emberek pénztárcáját kell a háborús inflációtól megkímélni – jelentette ki Szentkirályi Alexandra kormányszóvivő az M1 aktuális csatorna hétfő reggeli műsorában.',
                    cardImg: '',
                    cardColor: 'light'
                },
                { 
                    cardTitle: '[cat-3] Gondoltad volna? A magyarok 62 százaléka harcolna, ha megtámadnák hazánkat',
                    cardText: 'A Publicus Intézet május 26–30. között 1004 fő megkérdezésével készített országos reprezentatív közvélemény-kutatásban kérdezte az embereket arról, hogy mit tennének, ha Magyarország háborúba keveredne.',
                    cardImg: 'https://metropol.hu/wp-content/uploads/2020/09/5f575e717ebc7151718983FOTOhonvedelemhu-1.jpg',
                    cardColor: 'dark'
                },
            ]
        },
    ]
}

Component

import { Component, OnInit } from '@angular/core';

import { CardDefinitions } from './app.definitions'; 
import { CardMock } from './app.mock';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent{
  cards: CardDefinitions = CardMock;
  ngOnInit() {}
}

HTML

<div class="row py-lg-5">
  <div class="col-lg-6 col-md-8 mx-auto">
    <img class="img-fluid" [src]="cards.mainData.mainImg" [alt]="cards.mainData.mainTitle">
    <h1 class="fw-light">
      {{cards.mainData.mainTitle}}
    </h1>
    <p class="lead text-muted">
      {{cards.mainData.mainLead}}
    </p>
  </div>
</div>

<div class="container">
  <ng-container *ngFor="let card of cards.cardPackage">
    <h2>{{card.cardCat}}</h2>
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

    <div class="col" *ngFor="let item of card.cardData">
      
      <div class="card shadow-sm" ngClass="{{card.cardColor}}">
        <img *ngIf="item.cardImg" class="card-img-top" [src]="item.cardImg" [alt]="item.cardTitle">
        <div class="card-body">
          <h4 class="card-title">
            {{item.cardTitle}}
          </h4>
          <p class="card-text">{{item.cardText}}</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="category">
              Kategória: <strong>{{item.cardCat}}</strong>
            </div>
          </div>
        </div>
      </div>
    
    </div>
    
  </div>
</ng-container>
</div>