OnChange équivalent dans Angular 2

1. la propriété OnChange dans Angular 2
2. Équivalent de OnChange dans Angular 2

Les liaisons d’événements Angular sont un excellent moyen de répondre à tout événement DOM. Ils nous permettent de lier notre code aux événements de clic ou d’entrée natifs de l’élément et de l’exécuter lorsqu’ils se produisent.

Le OnChanges peut être utilisé pour surveiller les modifications des paramètres d’entrée dans un projet Angular, et nous pouvons utiliser l’équivalent OnChanges dans Angular 2 pour les champs de saisie, les clics de bouton, les éléments de liste ou même les événements de défilement qui seront discutés dans cet article.

la propriété OnChange dans Angular 2

Angular 2.0 a une liaison de données bidirectionnelle. Toute modification du champ de saisie sera immédiatement répercutée sur l’interface utilisateur et vice versa.

Onchange est une propriété d’un élément d’entrée dans Angular 2 qui spécifie ce qui doit se passer lorsque l’utilisateur y tape ou sélectionne une valeur dans sa liste déroulante.

Syntaxe:

ngOnChanges(changes: SimpleChanges)

L’argument SimpleChanges est passé à la méthode ngOnChanges(), qui renvoie les nouvelles et précédentes valeurs d’entrée suite aux modifications.

Lors de l’utilisation du type de données d’objet utilisateur d’entrée, ngOnChanges() n’est invoqué que lorsque le lien de l’objet dans le composant parent change.

La méthode ngOnChanges() ne s’exécutera pas si nous modifions simplement les valeurs des attributs d’un objet utilisateur d’entrée.

Équivalent de OnChange dans Angular 2

L’événement OnChanges est un hook de cycle de vie qui s’exécute lorsque la valeur de l’entrée change. La directive ngModel lie une entrée ou un élément textarea à une propriété sur la portée actuelle, et elle remplace l’événement HTML5 onchange, qui est pris en charge dans Angular 2.

L’événement ngModelChange est déclenché lorsqu’un modèle est mis à jour et que sa valeur change. Il peut être déclenché en passant une expression à la directive ngModel ou en la liant à l’entrée.

Exemple de code - HTML :

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

Exemple de code - 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;
  }
}

Production:

changeFn() ne sera exécuté que lorsque l’utilisateur brouille l’entrée. D’autre part, lorsque les utilisateurs saisissent, collent ou modifient la valeur d’une entrée, ModelChangeFn() écoute l’événement et définit l’objet.

Cliquez ici pour exécuter le code mentionné ci-dessus.