Pessoal, na aula sobre property bind não foi citado em nenhum momento sobre event binding e DOM. O que seria isso?
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.