Explicación: Servicios http

10.2. HTML

Añadimos buscador y trabajamos con filteredPosts$

<header class="top">
  <h1>Posts</h1>
  <a class="btn" routerLink="/posts/new">+ Nuevo post</a>
</header>

<div class="search">
  <input
    type="text"
    [formControl]="searchControl"
    placeholder="Buscar por título o contenido…"
  />
</div>

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

CSS bonito

.top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.btn { padding:8px 12px; border:1px solid #ddd; border-radius:10px; text-decoration:none; background:#fff; }

.search { margin: 12px 0; }
.search input { width: 100%; max-width: 520px; padding: 10px; border: 1px solid #ddd; border-radius: 10px; }

.list { list-style: none; padding: 0; margin: 0; }
.item { padding: 12px; border: 1px solid #eee; border-radius: 12px; margin-bottom: 10px; background: #fff; }
.body { opacity: 0.8; margin: 6px 0 0; }
a { text-decoration: none; }