Angular 2 - entrada do usuário

No Angular 2, você pode usar a estrutura do elemento DOM do HTML para alterar os valores dos elementos em tempo de execução. Vejamos alguns em detalhes.

A tag de entrada

No arquivo app.component.ts coloque o código a seguir.

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

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

As coisas a seguir precisam ser observadas sobre o código acima.

[value] = ”username” - É usado para vincular a expressão nome de usuário à propriedade de valor do elemento de entrada.
(input) = ”expression” - Esta é uma forma declarativa de vincular uma expressão ao evento de entrada do elemento de entrada.
username = $event.target.value - A expressão que é executada quando o evento de entrada é disparado.
$event - É uma expressão exposta em associações de eventos pelo Angular, que possui o valor da carga útil do evento.

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.

Agora você pode digitar qualquer coisa e a mesma entrada será refletida no texto próximo ao controle de entrada.

Clique em Entrada

No arquivo app.component.ts coloque o código a seguir.

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

Depois de salvar todas as alterações de código e atualizar o navegador, você obterá a seguinte saída.

Quando você clica no botão Click Me, você obtém a seguinte saída.