Vinculação de Dados Bidirecional no Angular

No Angular, é possível fazer com que, à medida que o texto é inserido em um input, esse texto seja automaticamente passado para uma propriedade da classe. Isso é chamado de vinculação de dados bidirecional.

Para que essa vinculação funcione, primeiro é necessário ativá-la. Para isso, no arquivo do componente, importamos o FormsModule:

app/app.component.tsimport { FormsModule } from '@angular/forms';

E então adicionamos na propriedade imports do decorador @Component:

app/app.component.ts@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, UserComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

Após isso, a vinculação de dados bidirecional estará ativada e podemos usá-la. Vamos fazer isso.

Primeiro, vamos declarar uma propriedade da classe que será submetida à vinculação bidirecional:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Suponha que temos uma div e um input. Vamos fazer com que na div seja exibida uma determinada propriedade da classe:

html<div>
  {{ text }}
</div>
<input>

Vamos vincular nossa propriedade text à alteração do input. Para isso, no input precisamos escrever a diretiva especial [(ngModel)], cujo valor deve ser a propriedade de nossa classe:

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

Agora, se executarmos o código e começarmos a inserir texto no input, esse texto imediatamente começará a ser exibido na div.