Example for Models and Services

Model

export interface Card {
    cardTitle: string;
    cardText: string;
    cardCat: string;
    cardImg: string;
    cardColor: string;
}

Service

import { Injectable } from '@angular/core';
import { Card } from '../models/Card'; 

@Injectable({
  providedIn: 'root'
})

export class CardService {
  
  cards: Card[];
  
  constructor() {
    
    this.cards = [
      { 
        cardTitle: '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.',
        cardCat: 'Okmány',
        cardImg: 'https://metropol.hu/wp-content/uploads/2022/05/392601420220530bentinkutforgalmi4114MKMP-scaled.jpg',
        cardColor: 'primary'
      },
      { 
          cardTitle: '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.',
          cardCat: 'Szentkirályi Alexandra',
          cardImg: 'https://metropol.hu/wp-content/uploads/2020/10/DYT20201001012-scaled.jpg',
          cardColor: 'secondary'
      },
      { 
          cardTitle: '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.',
          cardCat: 'Honvédelem',
          cardImg: 'https://metropol.hu/wp-content/uploads/2020/09/5f575e717ebc7151718983FOTOhonvedelemhu-1.jpg',
          cardColor: 'primary'
      }
    ]
  }
  getCards(): Card[] {
    console.log('Fetching cards from service...');
    return this.cards;
  }
}

Component.ts

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

import { CardService } from './services/card.service';
import { Card } from './models/Card'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  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';

  card: Card = {
    cardTitle: '',
    cardText: '',
    cardCat: '',
    cardImg: '',
    cardColor: ''
  }
  cards: Card[];

  constructor(private cardService: CardService) { }

  ngOnInit() {
   
    this.cards = this.cardService.getCards();

  }
}

HTML

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

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">

    <div class="col" *ngFor="let card of cards">
      <div class="card shadow-sm">
        <img class="card-img-top" [src]="card.cardImg" [alt]="card.cardTitle">

        <div class="card-body">
          <h4 class="card-title">
            {{card.cardTitle}}
          </h4>
          <p class="card-text">{{card.cardText}}</p>
          <div class="d-flex justify-content-between align-items-center">
            <div class="category">
              Kategória: <strong>{{card.cardCat}}</strong>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>