Two-way Data Binding

• Valor do Template para o Componente e vice-versa
• Usa-se binding de eventos + propriedades

Evento "Change" de um input

Ao digitar uma informação em um campo input, o evento será disparado.

Método 1

<input type="text"
    [ngModel]="nome"
    (ngModelChange)="nome = $event"
>

export class DataBindingComponent implements OnInit {
  
  nome: string = 'Luan Dantas';
  
}

Método 2 (Sintaxe banana na caixa - Banana in the box)

Junta-se um binding de propriedade e um binding de evento [] + () = [(ngModel)]

<input type="text" [(ngModel)]="nome">
<p>Você digitou: {{ nome }}</p>

export class DataBindingComponent implements OnInit {
  
  nome: string = 'Luan Dantas';
  
}