Explicación: Servicios http

6.4. Página LISTADO (con enlaces a detalle)

src/app/pages/posts-list/posts-list.ts

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { Observable } from 'rxjs';
import { Post } from '../../models/post';
import { PostsService } from '../../services/posts';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-posts-list',
  imports: [RouterLink,AsyncPipe],
  templateUrl: './posts-list.html',
  styleUrl: './posts-list.css',
})
export class PostsListComponent {
  posts$!: Observable<Post[]>;

  constructor(private postsService: PostsService) {
    this.posts$ = this.postsService.getAll();
  }
}

posts-list.component.html

<h1>Posts</h1>

<ul>
  @for (p of posts$ | async; track p.id) {
    <li>
      <a [routerLink]="['/posts', p.id]">{{ p.title }}</a>
    </li>
  } @empty {
    <li>No hay posts</li>
  }
</ul>