Contenido del curso
Gestión de Entornos
Nuevas Funcionalidades en Angular
- 7

Variables locales con @let en Angular
09:14 min - 8

Lazy loading de imágenes con ngSrc en Angular
17:08 min - 9

URLs amigables para SEO en Angular
11:27 min - 10

"Reactividad en Angular: Migración a Input Signals"
20:42 min - 11

Migración automática de @Input a signals en Angular
Viendo ahora - 12

Migración de Outputs en Angular: De Decoradores a Funciones
07:35 min - 13

linkedSignal en Angular: computed con set
12:56 min - 14

Sincronización de Componentes en Angular con Model y Signals
12:03 min - 15

toSignal: Observables de RxJS como Signals
11:17 min - 16

Conversión de Observables a Signals en Angular con toSignal
08:07 min - 17

Interoperabilidad de RXDS y Signals en Angular: Uso de RX Resourcers
11:10 min - 18

Manejo de Parámetros Reactivos con RX Resource en Angular
09:18 min - 19

Manejo de Promesas y Fetch en Angular sin RXJS
07:59 min - 20

Reactividad en Angular: Uso de Signals para Consultas DOM
09:00 min - 21

Configuración de Prettier para HTML en Angular
05:28 min
Server-Side Rendering (SSR) y Navegación
- 22

Migración al Application Builder de Angular
10:17 min - 23

Server Side Rendering con Angular: Mejora Rendimiento y SEO
13:26 min - 24

afterNextRender: código seguro solo en el browser
09:42 min - 25

Geolocalización y APIs: Creando un Mapa de Tiendas Cercanas
15:39 min - 26

Pre-rendering en Angular con ng build
11:25 min - 27

Desplegando Angular SSR en Firebase
18:12 min
Optimización de Rendimiento
- 28

Generación de Meta Tags Dinámicos con Angular y Open Graph
15:11 min - 29

Creación de MetaTags Dinámicos en Angular
12:51 min - 30

Proceso de Hydration y Event Replay en Angular
05:54 min - 31

Productos relacionados con RxResource en Angular
09:25 min - 32

Carga diferida de componentes en Angular para mejorar rendimiento
10:10 min - 33

Optimización de Incremental Hydration en Angular
06:14 min - 34

Configuración de Server Routing en Angular
10:43 min - 35

Aplicaciones Sin Zone.js: Migración a Signals en Angular
13:02 min - 36

Cierre del curso avanzado de Angular
00:53 min
Migración automática de @Input a signals en Angular
Resumen
Migrar tu aplicación Angular al nuevo modelo de input signals mejora la reactividad granular en runtime sin reescribir tu code base a mano. Con un solo comando, Angular analiza tus componentes y transforma cada @Input en un signal input, ideal para equipos con proyectos grandes que buscan adoptar la nueva API sin fricción.
¿Qué gana tu app al migrar inputs a signals?
El cambio no acelera la carga inicial, pero sí afina lo que ocurre mientras la app corre. La reactividad pasa a ser más precisa: solo se actualiza lo que realmente depende de un valor, no ramas enteras del árbol de componentes.
¿Qué es un signal input? Es un input que en lugar de exponer su valor como propiedad directa, lo entrega a través de una función reactiva. Para leerlo ejecutas
miInput()y Angular sabe exactamente qué partes de la vista dependen de ese valor.
Esa diferencia importa cuando tu app tiene muchos componentes anidados, listas largas o vistas que se redibujan con frecuencia. La detección de cambios deja de ser un barrido general y se vuelve quirúrgica.
¿Cómo ejecutar la migración automática de input signals?
Angular incluye una schematic dedicada que recorre tu proyecto y reemplaza cada decorador @Input() por su equivalente con input(). Solo necesitas la terminal y elegir el alcance.
El comando base es:
bash ng generate @angular/core:signal-input-migration
Al ejecutarlo, la CLI te pregunta sobre qué carpeta correr la migración. Tienes dos caminos claros:
- Usar
.para migrar toda la aplicación de una sola pasada. - Indicar una ruta específica, por ejemplo el módulo de productos, para una migración progresiva componente por componente.
Esa segunda opción es la que recomiendan muchos equipos cuando el proyecto ya está en producción. Pruebas en una carpeta, validas que todo siga funcionando, y avanzas con confianza.
¿Qué cambia exactamente en tu código tras la migración?
La schematic no solo reemplaza el decorador. Ajusta también las lecturas dentro de la clase y del template. Por ejemplo, un @Input() audioUrl!: string con required se convierte en un signal input tipado, y cada this.audioUrl pasa a ser this.audioUrl() para suscribirse al valor.
En los templates ocurre lo mismo: donde antes leías product.stock, ahora ves product().stock. Si necesitas usar ese valor varias veces en el mismo bloque, conviene apoyarte en un @let para no ejecutar la función repetidamente:
html @let data = product();
<p>{{ data.stock }}</p>Ojo con el naming: no puedes nombrar la variable product si ya existe la función con ese nombre, por eso el ejemplo usa data.
¿Cómo distinguir signals de funciones normales en el código?
Aquí aparece una ambigüedad real. Como un signal se lee ejecutándolo, visualmente se confunde con una función plana de la clase. Leyendo message() no sabes si es un método o un signal.
¿Por qué usar el prefijo
$en signals? Es una convención no oficial que muchos equipos adoptan para identificar de un vistazo qué variables son reactivas. Viene del mundo de los observables, donde se usa el sufijo$con la misma intención.
La idea es declarar tus signals así:
$counterpara un signal contador.$messagepara un signal de mensaje.$productpara un signal input de producto.
Con solo mirar el nombre, cualquier persona del equipo entiende que esa ejecución es una suscripción a un valor reactivo, no una llamada a un método cualquiera. La lectura del código se vuelve más declarativa.
¿Qué hacer cuando el alias choca con ESLint?
Si renombras tu input con $product, los componentes padre estarían obligados a enviar el atributo como [$product]="...". Para mantener la API limpia hacia afuera, los signal inputs aceptan un alias, de modo que el padre siga enviando [product]="..." mientras internamente lo manejas como $product.
El detalle: ESLint marca el uso de alias como mala práctica, porque permite que el nombre interno y el externo difieran arbitrariamente. Y tiene razón, podrías llamar duration por fuera y price por dentro, lo cual sería un caos.
Sin embargo, en este caso el alias cumple un propósito de legibilidad acordado por el equipo. Para desactivar la regla, la agregas en tu configuración de ESLint con valor "off" y documentas el porqué. Romper una regla está bien cuando sabes exactamente cuál rompes y por qué lo haces.
Si tu equipo ya migró a signal inputs, cuéntame en los comentarios qué convención de naming adoptaron y cómo les fue con la migración progresiva.