Necesitas JavaScript moderno, TypeScript, módulos y manejo del DOM a nivel conceptual.
CONTENIDO ORIGINAL
Avanza en orden. Cada lección está redactada para Palta es Cool, utiliza ejemplos propios y termina con una actividad cuya respuesta puedes desplegar.
ANTES DE EMPEZAR
Ubícate antes de avanzar
Al terminar deberías poder relacionar Componentes standalone con Plantillas y comunicación y resolver un caso nuevo.
Reserva entre 75 y 120 minutos o divide el laboratorio en dos sesiones.
04 / PREPARA EL LABORATORIO
Utiliza un navegador con herramientas de desarrollo y una versión LTS de Node.js con npm. Angular y MongoDB se preparan cuando llegues a esos bloques.
Abrir la guía de herramientas →Diagnóstico rápido: ¿cómo se relacionan Componentes standalone y Plantillas y comunicación? ＋
No necesitas acertar todavía. Escribe una hipótesis de dos líneas y compárala con tu respuesta al finalizar; si puedes corregirla y justificar el cambio, hubo aprendizaje.
Aprende el tema paso a paso
Construirás Angular moderno con componentes enfocados, plantillas declarativas, señales y flujo de datos explícito.
Al terminar podrás
- Un componente coordina una parte de la interfaz
- Datos bajan; eventos describen lo que ocurrió
- signal guarda estado; computed deriva sin duplicarlo
01
Componentes
Un componente coordina una parte de la interfaz
Un componente standalone reúne clase, plantilla, estilos e imports necesarios. La clase mantiene estado de vista y acciones; la plantilla declara cómo representarlos. Dividir por responsabilidades y límites de cambio es más útil que crear un componente por cada etiqueta.
Mantén entradas pequeñas y explícitas.
No realices trabajo costoso desde expresiones de plantilla.
Conserva reglas de negocio fuera de la vista.
¿Qué señal indica que un componente tiene demasiadas responsabilidades?
Mostrar respuesta ＋
Cuando conoce navegación, red, persistencia y múltiples reglas no relacionadas, o cambia por razones distintas a su interfaz.
02
Plantillas y comunicación
Datos bajan; eventos describen lo que ocurrió
Interpolación y property binding representan valores; event binding conecta acciones. Un input entrega datos al hijo y un output comunica un evento al padre sin modificarlo directamente. @if y @for expresan estructura; track conserva identidad durante actualizaciones.
No llames output guardarClick: describe guardarSolicitado.
track usa una identidad estable, no el índice si el orden cambia.
La plantilla debe mostrar carga, vacío, error y contenido.
¿Por qué el hijo no debería borrar directamente en el servicio si el padre coordina la lista?
Mostrar respuesta ＋
Porque mezcla representación con flujo de datos y dificulta confirmación, actualización consistente y pruebas del contenedor.
03
Signals
signal guarda estado; computed deriva sin duplicarlo
Una señal writable notifica cuando cambia. computed calcula un valor de solo lectura desde otras señales y memoriza la derivación; no conviene guardar manualmente un dato que puede derivarse. effect conecta con APIs no reactivas, no sustituye el cálculo de estado.
Usa set o update para cambiar una señal.
computed debe ser puro.
Readonly no impide mutación profunda del objeto contenido.
¿Por qué visibles conviene ser computed y no otra señal actualizada a mano?
Mostrar respuesta ＋
Porque depende completamente de otras señales; derivarla elimina estados desincronizados y una segunda fuente de verdad.
Tu recorrido en tres ideas
- Un componente coordina una parte de la interfaz
- Datos bajan; eventos describen lo que ocurrió
- signal guarda estado; computed deriva sin duplicarlo
CIERRE DE LA SECCIÓN
Comprueba que puedes usarlo
Antes de continuar, revisa estos tropiezos frecuentes y resuelve un caso sin copiar los ejemplos.
Guardar manualmente un valor que puede derivarse con computed.
Hacer que un componente hijo modifique estado del padre o llame servicios ajenos.
Ahora hazlo sin guía
Construye una lista filtrable de proyectos con componentes standalone, input/output, @for con track y signals.
Mostrar pauta de corrección ＋
Una respuesta sólida:
- Existe una sola fuente de verdad.
- Los eventos describen intención.
- La plantilla distingue carga, vacío y contenido.