O que é vinculação de dados bidirecional no Angular

    A vinculação de dados bidirecional no Angular permite que os dados fluam do componente para a exibição e vice-versa. Ele é usado para exibir informações para o usuário final e permite que ele faça alterações nos dados subjacentes usando a interface do usuário. Isso faz uma conexão bidirecional entre a visualização (o modelo) e a classe de componente que já mencionamos. O processo é semelhante à associação bidirecional no WPF.

    How does data binding work in Angular?

    Angular vinculação de dados funciona sincronizando os dados nos componentes angulares com a interface do usuário. Dessa forma, ele sempre pode mostrar o valor atual dos dados. Em termos de vinculação bidirecional, a sincronização automática de dados acontece entre o Model e a View, mantendo ambos sincronizados o tempo todo. Por causa disso, qualquer alteração feita no Modelo também é refletida imediatamente na Vista. E vice-versa – as alterações feitas na Vista também são atualizadas no Modelo. A associação de dados bidirecional no Angular é usada para exibir informações para o usuário final e permite que o usuário final faça alterações nos dados subjacentes usando a interface do usuário. Isso faz uma conexão bidirecional entre a exibição (o modelo) e a classe de componente. Isso é semelhante à associação bidirecional no WPF.

    Uma associação unidirecional está pegando o estado de nossa classe de componente e exibindo-o em nossa exibição. Vejamos este código:

    <input #myTitle (keyup)="keyup(myTitle.value)">
<h2>{{ text }}</h2>

    export class SampleComponent implements OnInit {

text = 'default value';

keyup(value) {
  this.text = value;
}
...

    Aqui estamos simplesmente usando interpolation para vincular a propriedade text ao HTML. Isso exibirá o valor da propriedade text na interface do usuário. O input elemento manipula a interação do usuário e atualiza a propriedade subjacente text por meio da interface do usuário usando a associação de eventos. Essencialmente, a entrada faz o oposto da ligação unidirecional, ela pega as informações da interface do usuário e atualiza a propriedade na classe do componente. O método que está conectado ao evento keyup da entrada atualiza a propriedade text sempre que o evento ocorre. Depois que o valor da propriedade text é alterado pelo método de evento, essa alteração é refletida na interface do usuário pela associação unidirecional usando interpolation o elemento h2. Portanto, se o usuário digitar algo no elemento de entrada, isso atualizará imediatamente o texto h2 - esse comportamento é basicamente uma simulação de uma ligação bidirecional. O mesmo também pode ser obtido no WPF usando uma associação unidirecional e um manipulador de eventos keyup, mas a associação bidirecional é muito mais conveniente de usar.

    How to implement two-way data binding in Angular

    Felizmente, podemos implementar a lógica da amostra acima de uma maneira muito mais fácil e é aqui que entra a ligação bidirecional!

    A direção de uma associação bidirecional não é apenas a classe de componente para a interface do usuário, mas também a interface do usuário para a classe de componente. Para o conseguir, vamos utilizar uma directiva chamada ngModel. Vamos atualizar o exemplo acima com a ngModel diretiva. A sintaxe para isso é - um colchete aberto seguido por um parêntese aberto e, claro, o parêntese e colchete de fechamento correspondentes. Isso é chamado de banana na caixa, então vamos vê-lo em ação!

    <input [(ngModel)]="text">
<h2>{{ text }}</h2>

    E as associações equivalentes no WPF seriam:

    <TextBox Text="{Binding Path=Text, Mode=TwoWay}"></TextBox>
<TextBlock Text="{Binding Path=Text, Mode=OneWay}"></TextBlock>

    A ligação Angular é uma questão de sintaxe e, no WPF, é mais como uma configuração - em particular o valor de Binding.Mode.

    Se executarmos este código, ocorrerá um erro no console - dizendo que o ngModel é uma propriedade desconhecida do elemento de entrada. Isso se deve ao fato de que, para usar a ngModel diretiva, é necessário importar o FormsModule. Ele precisa ser importado para o app.module.ts arquivo:

    import { FormsModule } from '@angular/forms';
...
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
...

    Se executarmos o exemplo, o valor da entrada inicial será igual ao valor padrão, que é o text valor da propriedade. Como a entrada é editável, alterar seu valor refletirá sobre o elemento h2 imediatamente. Portanto, digitar na entrada atualiza a text propriedade e, em seguida, o elemento h2 exibe esse valor por meio do interpolation.

    Outra maneira equivalente de conseguir isso é:

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

    Na verdade, isso é semelhante ao primeiro exemplo, que usou uma associação de propriedade e uma associação de evento.

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.