Bom dia pessoal,
minha dúvida é o seguinte, em photo-list.component.html eu tenho o seguinte:
<ap-load-button (click)="load()"></ap-load-button>e em load-button.component.html que o template de (ap-load-button) eu tenho o seguinte:
<div class="text-center">
<button class="btn btn-primary">Load more</button>
</div>como é que funcionou o data binding do event click sendo que o load-button não é um simples botão, ele é um botão evolvido por uma tag div?
Obrigado a todos.
Fala ai João, tudo bem? Isso funciona por causa do event propagation, quando você faz o click no botão Load more do load-button.component.html ele vai disparar o evento de click para os pais até chegar no <ap-load-button (click)="load()"> e executar a função informada como callback.
Espero ter ajudado.
Olá Matheus, tudo bem sim, obrigado pela resposta,
eu entendi o que vc comentou mas com isso surgiu outra dúvida.
Imagina o seguinte exemplo hipotético. Eu tenho o seguinte componente chamado app-button-footer:
<div class="text-center">
<button class="btn btn-primary">Carregar mais</button>
<button class="btn btn-success">Voltar</button>
</div>E no meu template eu quero fazer o event binding da seguinte forma:
<app-button-footer (click)="load()"></app-button-footer>Como o event propagation se comportará nesse caso, agora que eu tenho dois botões no meu componente e não apenas um?
Fala ai João, ai nesses casos é bom você utilizar o @Output e EventEmitter para fazer a comunicação de componentes filhos para pais.
Espero ter ajudado.