Porque [] e () em ngModel ?

Fala, Felipe! Beleza?

Ótima pergunta, a presença desses símbolos ajuda até no entendimento do funcionamento do ngModel.

Quando falamos de property bind no Angular, podemos encontrar alguns padrões, entre eles, destaco dois:

• Quando queremos atribuir um valor dinâmico a alguma propriedade, como o ngClassque recebe um valor dinâmico para a(s) classe(s) do elemento, passamos os colchetes ([]). Isso representa um fluxo de informação, partindo do componente para o template (HTML).
• Quando estamos manipulando eventos, utilizamos () para passar esse evento a partir do template para o componente, ou seja, o fluxo contrário do descrito acima.

O ngModel lida com os dois fluxos: ele dispara eventos para atualizar a sua variável no componente, e se a variável for atualizada ele recebe esse valor também. Por isso representamos tanto com () quanto com [], pois é um fluxo bidirecional.

Fica até mais claro se você dividir esses dois casos. Não é obrigatório que você defina o ngModel desta forma, você pode fazer o seguinte:

<input [ngModel]="valor" (ngModelChange)="valorMaiusculo($event)" id="exemplo-maiusculo">

Esse exemplo vem da documentação do Angular, e basicamente resolve o seguinte problema: e se você quer o valor em maiúsculas, mesmo que o usuário digite em minúsculo, e você quer mostrar pro usuário esse valor em maiúsculas?

Dessa forma, nós podemos separar um dos fluxos e personalizar como ele será tratado, ao invés de usar o padrão.

Ficou claro? Pode ser um pouco confuso porque temos várias coisas acontecendo ao mesmo tempo. Mas acredito que ver os dois fluxos separados pode facilitar o processo.

Espero ter ajudado!

Bom dia Acredito que entendi.

Em resumo Utilizo, [] estou informando que será passado um valor por uma variavel que esta partindo do meu HTML para meu Component, e () quando quero passar um valor que estam em meu component (no caso a classe) para meu HTML.

Esta correto ?

Felipe, na verdade é o contrário.

Se queremos usar algo do nosso componente no HTML, o bind é representado por []. Quando queremos fazer algo no nosso componente, dependendo de eventos do HTML (como um clique, ou digitação), nós representamos com ().

• Fluxo do componente para o HTML: valor do .ts é usado no .html. A diretiva é englobada por colchetes ([]).
• Fluxo do HTML para o componente: evento no .html dispara comportamento no .ts. O evento é englobado por parenteses (()).

No caso do ngModel, usamos o () pois a cada evento de mudança no input, queremos atualizar a variável no componente. E usamos [] porque queremos que o valor dentro do input seja o valor da variável que está no componente.