Pessoal, na aula sobre property bind não foi citado em nenhum momento sobre event binding e DOM. O que seria isso?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Pessoal, na aula sobre property bind não foi citado em nenhum momento sobre event binding e DOM. O que seria isso?
Ô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.