Enlace de datos bidireccional en Angular

En Angular es posible hacer que a medida que se ingresa texto en un input, este texto ingrese automáticamente a una propiedad de la clase. Esto se llama enlace de datos bidireccional.

Para que este enlace funcione, primero es necesario activarlo. Para ello, en el archivo del componente importamos FormsModule:

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

Y luego lo agregamos a la propiedad imports del decorador @Component:

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

Después de esto, el enlace de datos bidireccional estará activado y podremos utilizarlo. Hagámoslo.

Primero declaremos una propiedad de la clase que luego someteremos al enlace bidireccional:

export class AppComponent {
	public text: string = '';
}

Supongamos que tenemos un div y un input. Que en el div se muestre una propiedad de la clase:

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

Vinculemos nuestra propiedad text al cambio del input. Para ello, en el input necesitamos escribir la directiva especial [(ngModel)], cuyo valor debe ser la propiedad de nuestra clase:

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

Ahora, si ejecutamos el código y comenzamos a ingresar texto en el input, este texto inmediatamente comenzará a mostrarse en el div.

Se da un input y un párrafo. En el input se muestra un número. Haga que a medida que se ingresa el número en el input, en el párrafo se muestre el cuadrado de este número.

Se dan dos inputs y un párrafo. En los inputs se ingresan números. Haga que en el párrafo se muestre la suma de los números ingresados.