Tutorial: Ver el detalle de un artista con sus álbumes

1. Objetivos de aprendizaje

Al terminar este tutorial vas a ser capaz de:

• Agregar un nuevo signal a un servicio que ya existe, para que varios componentes compartan “cuál es el elemento seleccionado”.
• Incluir un componente como hijo directo de otro (ArtistDetail dentro de ArtistList), sin dejar de leer la selección desde el servicio compartido.
• Iterar sobre una colección anidada (artista.albumes) con @for, el mismo patrón que ya usaste para el listado principal.

Prerrequisitos: haber completado el tutorial de compartir datos entre componentes con un servicio — ya tienes ArtistaService con artistasResource y crear(), y tu componente de listado inyectándolo.

Consejo

No hay ningún concepto nuevo en este tutorial: es la misma combinación de signals, @if/@for y servicio compartido que ya usaste, aplicada una vez más.

---

2. Agregar la selección a ArtistaService

ArtistaService ya centraliza la lectura (artistasResource) y la escritura (crear()) de tu módulo. Ahora también va a centralizar cuál artista está seleccionado:

artista.service.ts

import { Injectable, inject, signal } from '@angular/core';
import { httpResource, HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Artista, NuevoArtista } from './artista.model';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ArtistaService {
  private http: HttpClient = inject(HttpClient);

  artistasResource = httpResource<Artista[]>(() => environment.ARTISTAS_URL);
  seleccionado = signal<Artista | null>(null);

  crear(nuevoArtista: NuevoArtista): Observable<Artista> {
    return this.http.post<Artista>(environment.ARTISTAS_URL, nuevoArtista);
  }
}

Consejo

seleccionado es un signal más, igual que count en Angular Signals: se lee invocándolo (seleccionado()) y se escribe con .set(...). Empieza en null porque, al cargar la página, todavía no hay ningún artista elegido.

---

3. ArtistList selecciona un artista al hacer clic

Agrega un (click) a cada card del listado:

artist-list.component.html

@for (artista of artistaService.artistasResource.value() ?? []; track artista.id) {
  <div class="card" (click)="seleccionar(artista)">
    {{ artista.nombre }}
  </div>
}

Y el método correspondiente en la clase:

artist-list.component.ts

seleccionar(artista: Artista): void {
  this.artistaService.seleccionado.set(artista);
}

---

4. Generar ArtistDetail

ng generate component artist-detail

Inyecta el mismo servicio y muestra el artista seleccionado junto con sus álbumes:

artist-detail.component.ts

import { Component, inject } from '@angular/core';
import { ArtistaService } from '../artista.service';

@Component({
  selector: 'app-artist-detail',
  standalone: true,
  templateUrl: './artist-detail.component.html',
})
export class ArtistDetailComponent {
  artistaService = inject(ArtistaService);

  cerrar(): void {
    this.artistaService.seleccionado.set(null);
  }
}

artist-detail.component.html

@if (artistaService.seleccionado(); as artista) {
  <div class="card mb-4">
    <div class="card-body">
      <h5 class="card-title">{{ artista.nombre }}</h5>
      <p class="text-muted">{{ artista.paisOrigen }}</p>
      <p>{{ artista.biografia }}</p>

      <h6>Álbumes</h6>
      <ul>
        @for (album of artista.albumes; track album.id) {
          <li>{{ album.titulo }} ({{ album.anioLanzamiento }})</li>
        }
      </ul>

      <button type="button" (click)="cerrar()">Cerrar</button>
    </div>
  </div>
}

Consejo

@if (artistaService.seleccionado(); as artista) guarda el valor no nulo del signal en la variable local artista, para no repetir artistaService.seleccionado()! en cada línea de adentro.

Consejo

Los nombres titulo y anioLanzamiento son un ejemplo: usa los atributos reales de tu propia entidad de álbum, la que definiste desde el Release 1. Los álbumes ya llegan completos dentro de cada artista — el mismo GET /artistas que llena tu listado — así que no necesitas otra petición HTTP para mostrarlos.

---

5. ArtistList incluye a ArtistDetail

A diferencia de ArtistCreate y ArtistList (que son hermanos, sin relación entre sí), aquí sí hay una relación directa: el listado es quien abre el detalle. Por eso ArtistDetail va dentro del template de ArtistList, no en app.html:

artist-list.component.ts

import { Component, inject } from '@angular/core';
import { ArtistaService } from '../artista.service';
import { Artista } from '../artista.model';
import { ArtistDetailComponent } from '../artist-detail/artist-detail.component';

@Component({
  selector: 'app-artist-list',
  standalone: true,
  imports: [ArtistDetailComponent],
  templateUrl: './artist-list.component.html',
})
export class ArtistListComponent {
  artistaService = inject(ArtistaService);

  seleccionar(artista: Artista): void {
    this.artistaService.seleccionado.set(artista);
  }
}

artist-list.component.html

<app-artist-detail />

@for (artista of artistaService.artistasResource.value() ?? []; track artista.id) {
  <div class="card" (click)="seleccionar(artista)">
    {{ artista.nombre }}
  </div>
}

Nota

ArtistDetail sí es hijo de ArtistList — podría recibir el artista por @Input. No lo hacemos: sigue leyendo seleccionado directamente del servicio, el mismo mecanismo que usa el resto de la app. Un solo mecanismo de comunicación (el servicio compartido) es más fácil de razonar que dos.

---

6. Verificar

Corre ng serve. Al hacer clic en un card:

• Arriba del listado debe aparecer el detalle del artista, con sus álbumes.
• “Cerrar” debe ocultarlo.
• Hacer clic en otro card debe cambiar el detalle directamente, sin pasar por “Cerrar” primero.

---

¿Dónde quedaste?

Al final de este tutorial tienes:

• ArtistaService con un tercer signal, seleccionado, además de artistasResource y crear().
• ArtistList seleccionando un artista al hacer clic en su card.
• ArtistDetail, hijo de ArtistList, mostrando el artista seleccionado y sus álbumes — sin @Input, leyendo el mismo servicio compartido que el resto de la app.