[Dúvida] - Componente pai e filho | Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD

Boa noite, compreendi o uso do decorador @Input(), que seria apenas indicar o recebimento de uma informação que está no componente pai pelo componente filho, me corrija se eu estiver com algum entendimento errado.

Porém achei confuso como é definido quem é pai de quem, usando apenas o decorator Input().

Como o angular já "percebeu" que ao ser usado este decorator, automaticamente o componente "listar-pensamento" é pai de "pensamento". Não consegui enxergar esta relação, pois não temos imports ou um recursos explícitos na classe que nos informe de onde virá a informação, fazendo analogia com outras linguagens, temos o "extends", mostrano de forma explícita.

Poderiam me explicar de outra forma, para que eu consiga enxergar em que momento de fato esta "amarração" é feita, e um se torna pai ou filho do outro?

Obrigado.

Olá, Armando! Tudo bem?

Entendo que a relação entre componentes no Angular pode parecer um pouco abstrata no começo. Vamos tentar esclarecer isso um pouco mais.

A relação entre componentes pai e filho no Angular é determinada principalmente pela estrutura do template HTML. Quando um componente é usado dentro do template de outro componente, ele se torna um componente filho. No exemplo da aula, o componente app-pensamento é usado dentro do template do componente listar-pensamento, então app-pensamento é filho de listar-pensamento.

<div class="mural">
    <div *ngFor="let pensamento of listaPensamentos">
        <app-pensamento [pensamento]="pensamento"></app-pensamento>
    </div>
</div>

O decorador @Input() é usado para permitir que o componente pai passe dados para o componente filho. No exemplo da aula, o componente listar-pensamento (pai) está passando a propriedade pensamento para o componente app-pensamento (filho) através do atributo pensamento (denotado por [pensamento]).

Então, a relação pai-filho é estabelecida no template HTML e o decorador @Input() permite a comunicação de dados do pai para o filho. Não há uma declaração explícita como extends em outras linguagens, mas a estrutura do template HTML e o uso do @Input() definem essa relação.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado. ✓

Mergulhe em programação