Angulaire 2 - Entrée utilisateur

Dans Angular 2, vous pouvez utiliser la structure des éléments DOM de HTML pour modifier les valeurs des éléments au moment de l'exécution. Examinons quelques-uns en détail.

La balise d'entrée

Dans le fichier app.component.ts, placez le code suivant.

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

@Component ({ 
   selector: 'my-app', 
   template: ' 
      <div> 
         <input [value] = "name" (input) = "name = $event.target.value"> 
         {{name}} 
      </div> 
   ' 
}) 
export class AppComponent { }

Les choses suivantes doivent être notées à propos du code ci-dessus.

• [value] = ”username” - Ceci est utilisé pour lier le nom d'utilisateur de l'expression à la propriété value de l'élément d'entrée.

• (input) = ”expression” - C'est une manière déclarative de lier une expression à l'événement d'entrée de l'élément d'entrée.

• username = $event.target.value - Expression exécutée lorsque l'événement d'entrée est déclenché.

• $event - Est une expression exposée dans les liaisons d'événements par Angular, qui a la valeur de la charge utile de l'événement.

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.

Vous pouvez maintenant taper n'importe quoi et la même entrée se reflétera dans le texte à côté du contrôle d'entrée.

Cliquez sur Entrée

Dans le fichier app.component.ts, placez le code suivant.

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

@Component ({
   selector: 'my-app',
   template: '<button (click) = "onClickMe()"> Click Me </button> {{clickMessage}}'
})

export class AppComponent {
   clickMessage = 'Hello';
   onClickMe() {
      this.clickMessage = 'This tutorial!';
   }
}

Une fois que vous avez enregistré toutes les modifications de code et actualisé le navigateur, vous obtiendrez la sortie suivante.

Lorsque vous cliquez sur le bouton Cliquez sur moi, vous obtiendrez la sortie suivante.