Angular 2 - Gestion des événements

Dans Angular 2, les événements tels que le clic sur un bouton ou tout autre type d'événements peuvent également être gérés très facilement. Les événements sont déclenchés à partir de la page html et sont envoyés à la classe Angular JS pour un traitement ultérieur.

Regardons un exemple de la façon dont nous pouvons réaliser la gestion des événements. Dans notre exemple, nous examinerons l'affichage d'un bouton de clic et d'une propriété d'état. Au départ, la propriété status sera vraie. Lorsque vous cliquez sur le bouton, la propriété status deviendra alors fausse.

Step 1 - Modifiez le code du fichier app.component.ts comme suit.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

Les points suivants doivent être notés à propos du code ci-dessus.

  • Nous définissons une variable appelée status de type Boolean qui est initialement vraie.

  • Ensuite, nous définissons la fonction cliquée qui sera appelée chaque fois que notre bouton sera cliqué sur notre page html. Dans la fonction, nous changeons la valeur de la propriété Status de true à false.

Step 2 - Apportez les modifications suivantes au fichier app / app.component.html, qui est le fichier modèle.

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

Les points suivants doivent être notés à propos du code ci-dessus.

  • Nous affichons d'abord simplement la valeur de la propriété Status de notre classe.

  • Ensuite, définissez la balise html bouton avec la valeur Click. Nous nous assurons ensuite que l'événement de clic du bouton est déclenché sur l'événement cliqué dans notre classe.

Step 3 - Enregistrez toutes les modifications de code et actualisez le navigateur, vous obtiendrez la sortie suivante.

Step 4 - Cliquez sur le bouton Cliquer, vous obtiendrez la sortie suivante.