Display Data

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) => {
        this.posts = response;
      });
  }
}

HTML

<ul class="list-group">
  <li *ngFor="let post of posts" class="list-group-item">{{ post.title }}</li>
</ul>
Was this page helpful?