Solucionado
Já vi essa aula umas 5 vezes e ainda não sinto que consegui absorver o conhecimento necessário. O professor vai fazendo o código de forma rápida, com uma explicação breve demais. Então, se alguém puder me fornecer uma explicação melhor, ou me recomendar algum vídeo de outro lugar que trate do mesmo assunto...
hoje, com a Alura e o Google Gemini
Olá, Fabio! Tudo bem?
A aula trata de envio de dados para o componente, certo? Vou tentar ajudar.
Há duas formas de comunicação entre componentes:
decorator @Output para criar esse evento no componente, e podemos acessá-lo pelo componente-pai passando os parenteses (<componente-filho (nomeDoEvento)="metodoQueLidaComOEvento($event)"></componente-filho>).decorator @Input. Quando criamos a propriedade com o @Input, estamos dizendo que ela virá como uma propriedade HTML é passada, na própria tag. Na hora de passarmos, lá no componente-pai precisamos usar os colchetes (<componente-filho [nomeDaPropriedade]="dadoSendoPassado"></componente-filho>).Chamamos isso de binding, que vem do inglês, significando "ligação", ou seja, estamos fazendo ligações entre dados ou com eventos. Por isso, o primeiro caso que eu citei chama Event Binding, e o segundo caso chama Property Binding. Você pode ler mais sobre essa comunicação na própria documentação do Angular.
Em ambos os casos, temos um fluxo unidirecional dos dados, certo? Se formos pensar hierarquicamente, os eventos sobem do componente-pai para o componente-filho, e as propriedades descem do componente-pai para o componente-filho.
É importante que você entenda os dois cenários, pois os conceitos são parecidos. O que muda é a sintaxe.
E, na realidade, você já vem usando esses dois conceitos desde que criou o formulário. Por exemplo, na linha:
<input class="form-field__input" id="valor" type="text" [(ngModel)]="valor" name="valor" />O ngModel serve para sincronizar dados, ou seja, atualizar no componente-pai quando o componente-filho faz uma alteração (Event Binding) e atualizar no componente-filho quando o pai faz alguma alteração (Property Binding). E é por isso que ele carrega tanto os parenteses quanto os colchetes.
Resumindo, temos dois lados para você entender:
@Input ou @Output) e da "ponte" de comunicação (os parenteses () ou os colchetes [])`.Recomendo que você dê uma olhada nos links da documentação do Angular que eu deixei aqui também, e caso alguma dúvida persista, é só avisar!
Bons estudos!
Obrigado Leonardo, deu pra entender melhor agora!