ngOnChanges y cambios en inputs
Reaccione a cambios en las propiedades de entrada.
ngOnChanges y cambios en inputs es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Reaccionar a los cambios de entrada
El hook OnChanges permite que un componente reaccione cada vez que cambian sus propiedades @Input. Angular llama a ngOnChanges antes de ngOnInit y en cada actualización de una entrada.
Implementar OnChanges
Implemente la interfaz OnChanges y añada un método ngOnChanges que reciba un objeto SimpleChanges.
import { Component, Input, OnChanges, SimpleChanges } from "@angular/core";
@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
@Input() count = 0;
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
}El objeto SimpleChanges
SimpleChanges es un mapa cuyas claves son los nombres de las entradas. Cada entrada es un SimpleChange con currentValue, previousValue y firstChange.
ngOnChanges(changes: SimpleChanges) {
const c = changes["count"];
if (c) {
console.log(c.previousValue, "->", c.currentValue);
}
}Detectar el primer cambio
El indicador firstChange es true la primera vez que se establece una entrada. Utilícelo para distinguir la inicialización de las actualizaciones posteriores.
ngOnChanges(changes: SimpleChanges) {
if (changes["count"]?.firstChange) {
console.log("initial value");
} else {
console.log("updated value");
}
}Reaccionar a una entrada específica
Compruebe siempre que la clave exista antes de leerla, ya que no todas las entradas cambian en cada ciclo.
ngOnChanges(changes: SimpleChanges) {
if ("userId" in changes) {
this.reload(this.userId);
}
}Detección basada en referencias
ngOnChanges se activa cuando cambian las referencias de objetos y arrays. Modificar un objeto pasado como entrada NO lo activa.
// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";
// will trigger it:
this.config = { ...this.config, theme: "dark" };Orden con ngOnInit
Durante la creación, ngOnChanges se ejecuta primero con las entradas iniciales y después ngOnInit. A partir de entonces, ngOnChanges vuelve a ejecutarse cada vez que cambian las entradas.
Comparar valores anteriores y nuevos
Un uso habitual consiste en reaccionar solo cuando un valor realmente cambia; por ejemplo, volver a cargar datos cuando cambia una entrada id.
ngOnChanges(changes: SimpleChanges) {
const id = changes["userId"];
if (id && id.currentValue !== id.previousValue) {
this.fetchUser(id.currentValue);
}
}Tipado para mayor seguridad
Puede leer valores de changes o directamente de la propiedad del componente; después de ngOnChanges, la propiedad ya contiene el valor actual.
ngOnChanges() {
// this.count already updated here
this.total = this.count * 2;
}Cuándo no usar OnChanges
Para obtener un estado derivado de una sola entrada, un getter o un valor calculado puede resultar más claro. Reserve ngOnChanges para los efectos secundarios que deban ejecutarse cuando se actualicen las entradas.
Varias entradas a la vez
Si varias entradas cambian en el mismo ciclo, ngOnChanges se llama una vez con todas ellas presentes en el mapa SimpleChanges.
ngOnChanges(changes: SimpleChanges) {
// both keys may be present
if (changes["min"] || changes["max"]) {
this.validateRange();
}
}Comprobación rápida
Compruebe su comprensión de OnChanges.
Resumen
El hook OnChanges reacciona a los cambios de entrada mediante un mapa SimpleChanges con currentValue, previousValue y firstChange. Se activa cuando cambian las referencias, así que utilice actualizaciones inmutables.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 38
- Lecciones
- 144
Preguntas frecuentes
¿La lección «ngOnChanges y cambios en inputs» es gratis?
Sí — el texto completo de «ngOnChanges y cambios en inputs» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «ngOnChanges y cambios en inputs»?
Reaccione a cambios en las propiedades de entrada. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «ngOnChanges y cambios en inputs»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- ngOnInit e inicialización
- ngOnChanges y cambios en inputs
- ngOnDestroy y limpieza
- Hooks AfterView y AfterContent