Event Binding (Binding de Eventos)

Escutar eventos no HTML do Template e executar lógica de programação no Componente

Evento "Click" de um botão

Ao clicar no botão, será executada uma função criada em nosso component.

<button (click)="botaoClicado()" class="btn btn-primary">
    Me clique!
</button>

export class DataBindingComponent implements OnInit {
  
  botaoClicado(){
    alert = "O botão foi clicado!"
  }
  
}

Evento (KeyUp) ao pressionar uma tecla qualquer

Ao pressionar uma tecla, será executada uma função criada em nosso component.

<input type="text" (keyup)="onKeyup($event)" />

<p>Valor atual: {{ valorAtual }}</p>

export class DataBindingComponent implements OnInit {
  
  valorAtual: string = '';

  onKeyUp(evento: KeyBoardEvent) {
      this.valorAtual = (<HTMLInputElement>evento.target).value;
  }
}

Evento (KeyUp) ao pressionar a tecla ENTER

Ao pressionar a tecla ENTER, será executada uma função criada em nosso component.

<input type="text" #campoInput (keyup.enter)="salvarValor(campoInput.value)" />

<p>Valor salvo: {{ valorSalvo }}</p>

export class DataBindingComponent implements OnInit {
  
  valorSalvo: string = '';

  salvarValor(valor){
      this.valorSalvo = valor;
  }
}