Equivalente a OnChange en Angular 2

1. la propiedad OnChange en Angular 2
2. Equivalente de OnChange en Angular 2

Los enlaces de eventos Angular son una excelente manera de responder a cualquier evento DOM. Nos permiten vincular nuestro código con los eventos de entrada o clic nativos del elemento y ejecutarlo cuando ocurran.

Los OnChanges se pueden usar para monitorear cambios en los parámetros de entrada en un proyecto Angular, y podemos usar el equivalente OnChanges en Angular 2 para campos de entrada, clics de botones, elementos de lista o incluso eventos de desplazamiento que se discutirán en este artículo.

la propiedad OnChange en Angular 2

Angular 2.0 tiene enlace de datos bidireccional. Cualquier cambio en el campo de entrada se reflejará inmediatamente en la interfaz de usuario y viceversa.

Onchange es una propiedad de un elemento de entrada en Angular 2 que especifica lo que debería suceder cuando el usuario escribe o selecciona un valor de su lista desplegable.

Sintaxis:

ngOnChanges(changes: SimpleChanges)

El argumento SimpleChanges se pasa al método ngOnChanges(), que devuelve los valores de entrada nuevos y anteriores después de las modificaciones.

Cuando se utiliza el tipo de datos de objeto de usuario de entrada, ngOnChanges() solo se invoca cuando cambia el enlace del objeto en el componente principal.

El método ngOnChanges() no se ejecutará si simplemente modificamos los valores de los atributos de un objeto de usuario de entrada.

Equivalente de OnChange en Angular 2

El evento OnChanges es un gancho de bucle de vida que se ejecuta cuando cambia el valor de la entrada. La directiva ngModel vincula un elemento de entrada o textarea a una propiedad en el alcance actual, y reemplaza el evento onchange de HTML5, que es compatible con Angular 2.

El evento ngModelChange se activa cuando un modelo se actualiza y su valor cambia. Se puede activar pasando una expresión a la directiva ngModel o vinculándola a la entrada.

Código de ejemplo - HTML:

<div>
  <input [value]="first" (change)="changeFn($event)">
  <p>{{ first }}</p>
  <input [ngModel]="second" (ngModelChange)="modelChangeFn($event)">
  <p>{{ second }}</p>
</div>

Código de ejemplo: TypeScript:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  first = '1';
  second = '2';
  changeFn(abc) {
    this.first = abc.target.value;
  }
  modelChangeFn(abc: string) {
    this.second = abc;
  }
}

Producción:

changeFn() solo se ejecutará cuando el usuario desenfoque la entrada. Por otro lado, cuando los usuarios ingresan, pegan o editan el valor de una entrada, ModelChangeFn() escucha el evento y establece el objeto.

Haga clic aquí para ejecutar el código mencionado anteriormente.