Cuando un componente y su plantilla interactúan, es posible transferir datos y eventos entre ellos de diferentes maneras. Esto se denomina enlace de datos.

En Angular, existen cuatro tipos de enlace de datos, cada uno con un propósito específico.

A continuación, se muestra cómo funcionan utilizando un componente de tarea sencillo como ejemplo:

En este caso, se crea un objeto de tarea con tres propiedades: id, title y completed. Estas propiedades describen una tarea específica: su nombre y si ha sido completada.

Interpolación

Por ejemplo, si tienes una variable como task.title, puedes envolverla en {{ }}, y Angular mostrará su valor en el HTML.

Cuando Angular procesa la plantilla, encuentra la expresión {{ task.title }} y la reemplaza con el valor actual de task.title del componente.

Si el valor es 'Buy groceries', eso es exactamente lo que aparecerá dentro de la etiqueta <h3>. El mismo proceso se aplica a cualquier otro valor que interpoles.

Por lo tanto, la interpolación es unidireccional: los datos fluyen del componente a la plantilla, y el usuario simplemente ve el resultado.

Enlace de Propiedades

A veces, no solo se desea mostrar texto, sino controlar el comportamiento de un elemento, como deshabilitar un botón, establecer la fuente de una imagen o marcar una casilla de verificación.

Angular permite enlazar valores a las propiedades de los elementos HTML utilizando corchetes.

Imagina que la tarea ya está completada (task.completed = true). En ese caso, queremos que el botón esté deshabilitado. Cuando Angular ve [disabled]="task.completed", toma el valor del componente y lo vincula a la propiedad disabled del elemento DOM.

Si el valor es true, el botón se deshabilita. Si es false, el botón permanece activo.

Nuevamente, esto es enlace unidireccional: los datos fluyen desde el componente hacia la plantilla, y la plantilla se ajusta según el estado actual del objeto task.

Enlace de eventos

Para que la aplicación responda a las acciones del usuario (como clics), Angular proporciona el enlace de eventos. Cuando un usuario interactúa con un elemento, puedes "capturar" ese evento y llamar a un método en tu componente.

Agreguemos un método al componente:

Y actualiza la plantilla:

Cuando el usuario hace clic en el botón, Angular detecta el evento (click) y llama al método toggleComplete() en el componente. Este método alterna el valor de task.completed. Después de eso, Angular vuelve a renderizar la plantilla y, gracias a la interpolación ({{ task.completed ? 'Undo' : 'Complete' }}), el texto del botón se actualiza al instante.

Aquí, los datos fluyen en una sola dirección: desde la plantilla hacia el componente (se pasa una acción hacia adentro).

Enlace bidireccional

A veces se requiere que los cambios en la plantilla (como escribir en un campo de entrada) actualicen inmediatamente el componente, y que los cambios en el componente actualicen de inmediato la plantilla. Angular facilita esto mediante el enlace bidireccional utilizando [(ngModel)].

Importante: Para utilizar [(ngModel)], es necesario importar el FormsModule, como se muestra a continuación:

Y aquí está la plantilla:

Aquí es donde ocurre la magia del enlace bidireccional. Cuando un usuario escribe en el campo de entrada, Angular actualiza automáticamente task.title dentro del componente. Y cuando task.title cambia en el componente, Angular refleja inmediatamente esa actualización en el campo de entrada.

A diferencia de otros tipos de enlace, el enlace bidireccional mantiene el componente y la plantilla sincronizados en todo momento.

Diferencias clave

Cada uno de estos métodos de enlace de datos tiene sus propias características y es más adecuado para diferentes escenarios de interacción de datos dentro de una aplicación.