Puente a Angular 21: tu tarjeta con signals

Angular es la otra gran familia de frameworks: más estructurado, muy usado en empresas, y con una novedad que lo modernizó por completo —las SIGNALS—. Tomamos otra vez la tarjeta del módulo 14 y la vemos con la reactividad de Angular 21. Reconocerás la misma lógica de estado que ya dominas, con otra sintaxis y una idea elegante debajo.

La hoja de cálculo reactiva

Tu tarjeta del módulo 14, en Angular

import { Component, signal, input } from "@angular/core";

@Component({
selector: "app-tarjeta",
standalone: true,
template: `
  <article class="tarjeta">
    <h3>{{ titulo() }}</h3>
    <button [class.activo]="activo()" (click)="alternar()">
      {{ activo() ? '♥ Te gusta' : '♡ Me gusta' }}
    </button>
  </article>
`,
})
export class TarjetaComponent {
titulo = input("Amanecer andino");      // input signal: la 'prop' del componente
activo = signal(false);                 // estado reactivo (la celda)
alternar() { this.activo.update((v) => !v); }   // cambiarla actualiza la vista
}

La lógica es idéntica a la del módulo 14 y a la de React: un booleano activo que se alterna. La signal activo se LEE llamándola como función (activo()) y se CAMBIA con .set() o .update(). Al cambiarla, la plantilla que la usa se redibuja sola — sin classList.toggle ni textContent.

El binding de plantilla: tres símbolos

Angular conecta la clase con el HTML mediante tres tipos de binding que reconocerás enseguida:

<!-- INTERPOLACIÓN {{ }}: mostrar un valor -->
<h3>{{ titulo() }}</h3>

<!-- [propiedad]: enlazar una propiedad/atributo al estado -->
<button [class.activo]="activo()" [disabled]="cargando()">...</button>

<!-- (evento): reaccionar a un evento del DOM -->
<button (click)="alternar()">Me gusta</button>

Es el mismo trío de siempre —mostrar datos, cambiar clases/atributos según estado, reaccionar a clics— que en el módulo 14 hacías con textContent, classList y addEventListener. Angular lo declara EN la plantilla: {{ }} para mostrar, [ ] para enlazar hacia el DOM, ( ) para escuchar del DOM. Y su control de flujo moderno (@if, @for) reemplaza los bucles de render manual del módulo 14.

Mini-reto

Traza el paralelo completo de tu tarjeta en las tres formas que ya viste: en vanilla (módulo 14) alternabas con classList.toggle; en React con useState + className; en Angular con signal + [class.activo]. Escribe las tres versiones del MISMO botón lado a lado. Ver que es la misma idea —estado que gobierna la vista— con tres sintaxis desmitifica todos los frameworks a la vez.

Qué sigue

Recorriste los frameworks de JavaScript. El último puente es distinto: no es un framework de componentes, sino de ESTILOS —Tailwind—, y conecta directo con lo que construiste en el módulo 17. Verás tus tokens convertirse en la configuración de Tailwind v4, cerrando el círculo del curso.