Display Data Cards

TS

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.scss'],
})
export class PostsComponent {
  posts: any[] = [];
  constructor(http: HttpClient) {
    http
      .get<any>('https://jsonplaceholder.typicode.com/posts')
      .subscribe((response) => {
        console.log(JSON.stringify(response, null, 2));
        this.posts = response;
      });
  }
}

HTML

<div class="card mb-3" *ngFor="let post of posts">
  <div class="card-body">
    <h4 class="card-title">
      {{ post.title }}
    </h4>
    <p class="card-text">
      {{ post.body }}
    </p>
  </div>
</div>