¿Cómo detectar cuándo cambia un valor de @Input() en Angular?

@Input() es básicamente un decorador para vincular una propiedad como entrada. Se utiliza para pasar datos, es decir, vinculación de propiedades de un componente a otro o podemos decir, del componente principal al secundario. Está enlazado con el elemento DOM. Cuando se cambia el valor del elemento DOM, Angular actualiza automáticamente esta propiedad con el valor cambiado. Aquí veremos cómo podemos usarlo.

Enfoque: @Input() se puede usar de dos maneras:
• Enlaces bidireccionales con @Input()
• Enlace unidireccional con ngOnChange() y @Input()

• Primero, veremos el enlace bidireccional.
  El enlace bidireccional combina la entrada y la salida en una sola notación mediante la directiva ngModel. La notación para el enlace bidireccional es [()].
  Así es como implementaremos el enlace bidireccional. Tenemos un componente FormComponent (padre) y ChildComponent (hijo). Cuando el usuario ingresa algo en el campo de entrada de texto del componente principal, el componente secundario lo detecta.

  Implementation of Two-way binding:

  Aquí estamos creando un componente padre y añadiéndole un hijo.
  formulario.componente.html

  <div style="border: 1px solid rgb(46, 93, 194);              height: 25vh;              width: 35vw;              padding: 10px 10px;              margin: 20px;" >     <b>Type here : </b>        <input type="text" [(ngModel)]='text' />      <child [message]='text'></child>  </div>

  En el componente secundario, estamos pasando un ‘mensaje’ de propiedad que contiene el valor vinculado por el elemento de entrada usando ngModel. Aquí está la clase FormComponent:

  formulario.componente.ts

  import { Component, OnInit } from '@angular/core';    @Component({   selector: 'app-form',   templateUrl: './form.component.html',   styleUrls: ['./form.component.scss'] }) export class FormComponent implements OnInit {      constructor() { }      ngOnInit(): void {   }   public text : string; }

  Este cambio se reflejará en el componente secundario. El ‘mensaje’ se mostrará aquí. Aquí está el código para eso:
  child.component.html

  <div style="border:1px solid rgb(53, 71, 131);             width:30vw;              height: 12vh;             padding: 10px 10px;             margin:20px">  <h4> You entered <span>{{message}}</span></h4>    </div>

  En la clase ChildComponent, importaremos Input para detectar el mensaje de la clase FormComponent.

  child.component.ts

  import { Component, OnInit, Input } from '@angular/core';    @Component({   selector: 'child',   templateUrl: './child.component.html',   styleUrls: ['./child.component.scss'] }) export class ChildComponent {    //message will detect the input from FormComponent.   @Input() message:string;    constructor() { } }

  Esto fue todo sobre el enlace bidireccional. Ahora veamos cómo usar el enlace unidireccional.

• Implementation of One-way binding with ngOnChange() and @Input():

  Así es como usaremos ngOnChange() para vincular la entrada. El código para childComponent será el mismo que en el caso del enlace bidireccional. Sin embargo, el FormComponent tendrá el método onChange() siendo llamado. Aquí está el código para eso.
  formulario.componente.html

  <div style="border: 1px solid rgb(46, 93, 194);             height: 25vh;              width: 35vw;              padding: 10px 10px;             margin: 20px;" >        <b>Type here : </b>        <input type="text"       [ngModel]='text'        (ngModelChange)='onChange($event)' />     <child [message]='text'></child> </div>

  Observe la diferencia entre este componente y el código anterior que muestra el enlace bidireccional. Aquí, ngModel y ngModelChange están vinculados con el elemento de entrada. Como estamos usando onChange(), no necesitamos usar @Input() para detectar el cambio.

  formulario.componente.ts

  import { Component, OnInit } from '@angular/core';    @Component({   selector: 'app-form',   templateUrl: './form.component.html',   styleUrls: ['./form.component.scss'] }) export class FormComponent implements OnInit {      constructor() { }      ngOnInit(): void {   }   public text : string;   onChange(UpdatedValue : string) :void   {     this.text = UpdatedValue;   } }

Producción: