Angular 21 de Cero a Experto / Fundamentos

Reto: Mi Bolsillo, tu primer árbol de componentes

Reto30 min60 XP

Es hora de juntar todo lo del módulo en una pieza real. Vas a construir el esqueleto de "Mi Bolsillo" —la app de gastos que acompaña todo el curso— como un árbol de componentes standalone con inputs, outputs y el nuevo control flow. La estructura de Angular la escribirás en código (comentado y exacto); la LÓGICA de datos la probarás en vivo aquí mismo.

Reto

El esqueleto de Mi Bolsillo en componentes

Media30 min60 XP(×2 sin mirar la solución)

Qué debes construir

Un árbol de tres componentes standalone:

TarjetaGastoComponent — recibe un nombre y un valor con input(), los muestra, y tiene un botón que emite un output() borrar con el id del gasto.
ListaGastosComponent — recibe un array de gastos, los pinta con @for (usando track) y @empty para el caso vacío, y escucha el borrar de cada tarjeta.
ResumenComponent — recibe el array y muestra el total y la cantidad de gastos.

Y por separado, la lógica pura de datos en TypeScript que estos componentes usarían: funciones para calcular el total, filtrar por categoría y encontrar el gasto más caro. Esa lógica la ejecutas en vivo en el playground de abajo.

Reglas

Usa la sintaxis moderna: input() / output(), control flow @for / @if / @empty, standalone (nada de NgModule, *ngFor ni @Input() decorador).
El @for debe usar track con un id estable.
La lógica de datos debe ser funciones puras tipadas (sin depender de Angular).

30:00

Cuando estés listo, arranca el reloj.

El razonamiento. Un componente bien diseñado hace UNA cosa: la TarjetaGasto solo sabe mostrar un gasto y pedir que lo borren —no sabe de la lista ni del total—. La Lista orquesta: pinta las tarjetas y decide qué pasa cuando una pide borrarse. El Resumen solo lee y muestra derivados. Esta separación (datos abajo, eventos arriba) es la que hace que las apps grandes no se conviertan en un nudo. Y la lógica de datos vive en funciones puras, independientes de Angular: así se pueden probar solas y reutilizar en cualquier parte.

Primero, la estructura de Angular (código exacto que correría en tu proyecto):

tarjeta-gasto.component.ts

import { Component, input, output } from '@angular/core';

@Component({
selector: 'app-tarjeta-gasto',
template: `
  <article class="tarjeta">
    <h3>{{ nombre() }}</h3>
    <span>{{ valor() }} COP</span>
    <button (click)="borrar.emit(id())">Eliminar</button>
  </article>
`,
})
export class TarjetaGastoComponent {
id = input.required<number>();
nombre = input.required<string>();
valor = input.required<number>();
borrar = output<number>();
}

lista-gastos.component.ts

import { Component, input, output } from '@angular/core';
import { TarjetaGastoComponent } from './tarjeta-gasto.component';
import { Gasto } from './gasto.model';

@Component({
selector: 'app-lista-gastos',
imports: [TarjetaGastoComponent],
template: `
  <ul>
    @for (g of gastos(); track g.id) {
      <app-tarjeta-gasto
        [id]="g.id" [nombre]="g.nombre" [valor]="g.valor"
        (borrar)="borrar.emit($event)" />
    } @empty {
      <li>Aún no tienes gastos. ¡Agrega el primero!</li>
    }
  </ul>
`,
})
export class ListaGastosComponent {
gastos = input.required<Gasto[]>();
borrar = output<number>();
}

resumen.component.ts

import { Component, input } from '@angular/core';
import { Gasto } from './gasto.model';
import { calcularTotal } from './gastos.logica';

@Component({
selector: 'app-resumen',
template: `
  <p>{{ gastos().length }} gastos — Total: {{ total() }} COP</p>
`,
})
export class ResumenComponent {
gastos = input.required<Gasto[]>();
// por ahora un getter; en el próximo módulo será un computed()
total() { return calcularTotal(this.gastos()); }
}

Y la lógica pura, que puedes ejecutar en vivo:

Fíjate en algo importante: esta lógica NO sabe nada de Angular. Son funciones puras sobre datos, tipadas con TypeScript (lo que dominaste en el SC-03). En Angular real, tus componentes las llamarían, y —desde el próximo módulo— envolverías el total en un computed() para que se recalcule solo cuando los gastos cambien. Por ahora, un simple método hace el trabajo.

Qué sigue

Construiste tu primer árbol de componentes y separaste la lógica de la vista. Notaste que el total lo calculas "a mano" cada vez —funciona, pero no es reactivo—. El próximo módulo resuelve eso de raíz: signals. Vas a envolver ese total en un computed() que se recalcula solo, y a construir tu propio sistema de señales desde cero para entender la magia por dentro.