Componentes standalone: el molde que se basta solo

Un componente es la unidad con la que construyes toda la UI de Angular: una pieza que combina marca (template), lógica (la clase) y estado. Igual que en React armabas un árbol de funciones-componente, en Angular armas un árbol de clases-componente que se usan unas a otras. Hoy dominas el decorador @Component, cómo un componente renderiza a otro, y por qué "standalone" cambió las reglas del juego.

Las piezas de LEGO, otra vez

Las cuatro partes de @Component

import { Component } from '@angular/core';

@Component({
selector: 'app-tarjeta-gasto',   // 1. el nombre de la etiqueta HTML
imports: [],                     // 2. qué otros componentes/directivas usa
template: `                      // 3. el HTML que renderiza
  <article class="tarjeta">
    <h3>{{ nombre }}</h3>
    <span>{{ valor }} COP</span>
  </article>
`,
styles: `                        // 4. CSS con alcance SOLO a este componente
  .tarjeta { border: 1px solid #2A3752; border-radius: 8px; padding: 12px; }
`,
})
export class TarjetaGastoComponent {
nombre = 'Café';
valor = 4500;
}

Fíjate en tres cosas que a alguien de React le resultan nuevas:

• El template es un string (o un archivo .html aparte con templateUrl). No es JSX compilado por Babel: es HTML real con una sintaxis de plantillas propia que Angular compila. Dobles llaves {{ }} para insertar valores, no { }.
• Los estilos tienen alcance automático. Ese .tarjeta NO se filtra a otros componentes: Angular encapsula el CSS por componente sin que tú hagas nada (como CSS Modules, pero de fábrica).
• La convención de nombres: el selector lleva prefijo (app-) y la clase termina en Component. El archivo se llama tarjeta-gasto.component.ts. Es la convención oficial y toda la comunidad la sigue —de nuevo, la ventaja del framework opinado.

Componer: un componente dentro de otro

Aquí es donde standalone importa. Para usar <app-tarjeta-gasto> dentro de otro componente, ese otro debe IMPORTARLO explícitamente en su array imports:

import { Component } from '@angular/core';
import { TarjetaGastoComponent } from './tarjeta-gasto.component';

@Component({
selector: 'app-lista-gastos',
imports: [TarjetaGastoComponent],   // sin esto, <app-tarjeta-gasto> no existe aquí
template: `
  <h2>Mis gastos</h2>
  <app-tarjeta-gasto />
  <app-tarjeta-gasto />
`,
})
export class ListaGastosComponent {}

Ese imports: [TarjetaGastoComponent] es la esencia de standalone: las dependencias de un componente se ven en el propio componente. Si lees ListaGastosComponent, sabes al instante qué usa por dentro. En React esto era el import de arriba del archivo; en Angular es explícito en el decorador y el compilador lo verifica.

Antes (declarations en un módulo) vs Ahora (imports en el componente)

El componente raíz y el arranque

Toda app Angular tiene un componente raíz (por convención AppComponent) que se monta en el index.html. El arranque moderno es una sola función, sin módulo raíz:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);   // así arranca toda la app, sin AppModule

Mini-reto

Diseña sobre papel (o en tu editor) un pequeño árbol de componentes para "Mi Bolsillo":

1. un ResumenComponent que muestre un total; 2) un TarjetaGastoComponent para un gasto;
2. un ListaGastosComponent que use ambos. Escribe solo los decoradores @Component con su selector e imports correctos —sin lógica todavía—. Verifica que cada componente que usa a otro lo tenga en su array imports.

Qué sigue

Tienes los moldes; ahora hay que llenarlos de datos y hacerlos reaccionar. La próxima lección es el sistema de binding de templates: cómo insertar valores, enlazar propiedades y atributos, y responder a eventos del usuario. El puente entre tu clase y lo que ve la persona.