Angular 2 - Input dell'utente

In Angular 2, puoi utilizzare la struttura degli elementi DOM dell'HTML per modificare i valori degli elementi in fase di esecuzione. Vediamone alcuni in dettaglio.

Il tag di input

Nel file app.component.ts inserire il codice seguente.

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

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

Le seguenti cose devono essere annotate sul codice sopra.

• [value] = ”username” - Viene utilizzato per associare il nome utente dell'espressione alla proprietà value dell'elemento di input.

• (input) = ”expression” - Questo è un modo dichiarativo per associare un'espressione all'evento di input dell'elemento di input.

• username = $event.target.value - L'espressione che viene eseguita quando viene attivato l'evento di input.

• $event - È un'espressione esposta nelle associazioni di eventi da Angular, che ha il valore del payload dell'evento.

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

Ora puoi digitare qualsiasi cosa e lo stesso input si rifletterà nel testo accanto al controllo Input.

Fare clic su Input

Nel file app.component.ts inserire il codice seguente.

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!';
   }
}

Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.

Quando premi il pulsante Click Me, otterrai il seguente output.