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:

import { FormsModule } from '@angular/forms';

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

@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:

export 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:

<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:

<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.

Dado um input e um parágrafo. No input, é inserido um número. Faça com que, à medida que o número é inserido no input, o parágrafo exiba o quadrado desse número.

Dados dois inputs e um parágrafo. Nos inputs, são inseridos números. Faça com que no parágrafo seja exibida a soma dos números inseridos.