1
resposta

Event binding permite que um evento do DOM seja atribuído a um método do componente.

Pessoal, na aula sobre property bind não foi citado em nenhum momento sobre event binding e DOM. O que seria isso?

1 resposta

Ôpa, beleza Paulo! Para conseguir explicar com clareza, irei dar dois exemplos para facilitar o entendimento, incluindo o property bind que já conhece, então vamos lá:

Property bind consiste em determinar que um atributo do elemento HTML possa ser um destino, afim de passar para ele uma propriedade do componente:

@Component({
    template: '<img [src]="propriedadeDoComponent">'
})
public propriedadeDoComponent = 'assets/cacatua.svg';

Então src é envolvido com os colchetes [] para indicar que aquela propriedade do elemento HTML irá ser um destino e receber uma propriedade do componente.

Agora Event bind consiste na vinculação de evento angular, contendo uma sintaxe entre parênteses () o nome do evento, seguido do sinal de igual '=' para poder inserir a declaração da instrução entre aspas " ":

@Component({
    template: `
        <img [src]="propriedadeDoComponent">
        <button type="button" (click)="mudarImagem()">Mudar imagem</button>`
})
public propriedadeDoComponent = 'assets/cacatua.svg';

mudarImagem(): void {
    this.propriedadeDoComponent = 'assets/tucano.svg';
}

Então click corresponde ao evento que desejo ter no botão, é o comportamento esperado para este elemento HTML, e mudarImagem é a instrução que desejo executar quando o evento click for disparado.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software