Angular 2 - Tratamento de Eventos

No Angular 2, eventos como clique de botão ou qualquer outro tipo de evento também podem ser tratados com muita facilidade. Os eventos são acionados a partir da página html e são enviados para a classe Angular JS para processamento posterior.

Vejamos um exemplo de como podemos obter o tratamento de eventos. Em nosso exemplo, veremos a exibição de um botão de clique e uma propriedade de status. Inicialmente, a propriedade status será verdadeira. Quando o botão é clicado, a propriedade de status se tornará falsa.

Step 1 - Altere o código do arquivo app.component.ts para o seguinte.

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

Os seguintes pontos precisam ser observados sobre o código acima.

• Estamos definindo uma variável chamada status do tipo Boolean que é inicialmente verdadeira.

• A seguir, estamos definindo a função clicada que será chamada sempre que nosso botão for clicado em nossa página html. Na função, alteramos o valor da propriedade Status de verdadeiro para falso.

Step 2 - Faça as seguintes alterações no arquivo app / app.component.html, que é o arquivo de modelo.

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

Os seguintes pontos precisam ser observados sobre o código acima.

• Primeiro, estamos apenas exibindo o valor da propriedade Status de nossa classe.

• Em seguida, estão definindo a tag html do botão com o valor de Click. Em seguida, garantimos que o evento de clique do botão seja acionado para o evento clicado em nossa classe.

Step 3 - Salve todas as alterações de código e atualize o navegador, você obterá a seguinte saída.

Step 4 - Clique no botão Clique, você obterá a seguinte saída.