Volver a la página principal
viernes 8 noviembre 2024
12

Cómo Observar Propiedades @Input en Angular

En Angular, el decorador @Input permite que un componente reciba datos de su componente padre. Sin embargo, para reaccionar a los cambios de estas propiedades @Input en tiempo real, es necesario observarlas adecuadamente. A continuación, se explica cómo realizar esta observación de manera eficiente en Angular, utilizando diferentes enfoques.

Observando Propiedades @Input en Angular

1. Usar ngOnChanges

La forma más común y recomendada para observar cambios en propiedades @Input es implementando el ciclo de vida ngOnChanges. Angular llama a este método cada vez que una propiedad de entrada cambia, permitiendo realizar acciones en respuesta a los cambios.

Ejemplo de ngOnChanges

En el archivo TypeScript del componente hijo, implementa el método ngOnChanges y verifica los cambios de la propiedad @Input: 

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-hijo',
  template: `<p>{{ mensaje }}</p>`
})
export class HijoComponent implements OnChanges {
  @Input() mensaje: string = '';

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['mensaje']) {
      console.log('mensaje ha cambiado:', changes['mensaje'].currentValue);
    }
  }
}

En este ejemplo:

  • changes['mensaje'] contiene información sobre el cambio en la propiedad mensaje.
  • Puedes acceder a currentValue (el nuevo valor) y previousValue (el valor anterior) para manejar los cambios según sea necesario.

2. Usar setters de TypeScript

Otra opción para observar cambios en @Input es usar un setter. Esto permite ejecutar código cada vez que la propiedad @Input recibe un valor nuevo.

Ejemplo de setter 

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

@Component({
  selector: 'app-hijo',
  template: `<p>{{ mensaje }}</p>`
})
export class HijoComponent {
  private _mensaje: string = '';

  @Input()
  set mensaje(value: string) {
    this._mensaje = value;
    console.log('Nuevo valor de mensaje:', value);
  }

  get mensaje(): string {
    return this._mensaje;
  }
}

En este ejemplo:

  • Cada vez que mensaje cambia, el setter se activa, permitiendo ejecutar acciones adicionales.
  • Es una forma útil cuando solo necesitas reaccionar a un @Input específico y quieres evitar sobrecargar ngOnChanges.

3. Usar RxJS para Propiedades Complejas

Si necesitas observar cambios en propiedades complejas o reaccionar a múltiples cambios, puedes usar RxJS con Subject o BehaviorSubject para gestionar estos cambios de forma reactiva.

Ejemplo con BehaviorSubject 

import { Component, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-hijo',
  template: `<p>{{ mensaje }}</p>`
})
export class HijoComponent {
  private _mensaje = new BehaviorSubject<string>('');

  @Input()
  set mensaje(value: string) {
    this._mensaje.next(value);
  }

  ngOnInit() {
    this._mensaje.subscribe(value => {
      console.log('Mensaje ha cambiado a:', value);
    });
  }
}

En este ejemplo:

  • Se utiliza un BehaviorSubject para emitir el valor actual de mensaje.
  • La suscripción a _mensaje permite reaccionar a cada cambio de forma reactiva.

Ejemplos de Uso Común

Cambiar el Estilo del Componente Basado en el Valor de @Input

Si tienes un componente hijo cuyo estilo depende de la entrada: 

@Component({
  selector: 'app-hijo',
  template: `<p [ngStyle]="{ color: textoColor }">{{ mensaje }}</p>`
})
export class HijoComponent implements OnChanges {
  @Input() mensaje: string = '';
  textoColor: string = 'black';

  ngOnChanges(changes: SimpleChanges) {
    if (changes['mensaje']) {
      this.textoColor = changes['mensaje'].currentValue.includes('importante') ? 'red' : 'black';
    }
  }
}

Referencias

Para más detalles, consulta la documentación oficial de Angular sobre @Input.

Etiquetas:
typescript angular
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer