Como o [(ngModel)] sabe qual atributo deve substituir no template ?

1 - Como o [(ngModel)] sabe qual atributo deve substituiu no template ? O código inicial era:

 <input type="text" class="input" name="autoria" id="autoria" placeholder="Digite a autoria ou fonte" [value]="pensamento.autoria">

Depois ficou:

 <input type="text" class="input" name="autoria" id="autoria" placeholder="Digite a autoria ou fonte" [(ngModel)]="pensamento.autoria">

Como ele sabe que o [(ngModel)] substitui exatamente o valor do atributo value?

2 - Dado o cenário acima. Porque no exemplo abaixo não foi preciso excluir o atributo value para usar o [(ngModel)]? O código inicial era:

<input type="radio" id="modelo1" value="modelo1" name="modelo-card"">

Depois ficou:

<input type="radio" id="modelo1" value="modelo1" name="modelo-card" [(ngModel)]="pensamento.modelo">

1 - Beleza! Então, saca só: o [(ngModel)] é tipo um cupido que une o valor do input com o modelo lá no TypeScript. Quando você coloca essa parada, ele automaticamente sabe que vai substituir o valor do atributo value. É tipo um match perfeito, sabe? A mágica acontece nos bastidores do Angular, e o [(ngModel)] se encarrega de fazer essa conexão direta.

2 - No segundo exemplo, o Angular é mais espertinho do que a gente pensa. Quando você usa o [(ngModel)] em um input do tipo radio, ele já entende que o valor do modelo (pensamento.modelo) vai casar com o atributo value. Ou seja, não precisa apagar o value do código inicial. O Angular faz o truque por debaixo dos panos, e você só precisa se preocupar em curtir o casamento perfeito entre o template e o TypeScript.

Massa né?

Chegou a hora de transformar