angular/aio/content/guide/binding-syntax.md

Sintaxis de Enlace: una visión general

El enlace de datos es un mecanismo utilizado para coordinar los valores de los datos que los usuarios visualizan en la aplicación. Aunque puedas insertar y actualizar valores en el HTML, la aplicación es más fácil de escribir, leer y mantener si tu le dejas esas tareas al framework de enlace. Por lo que simplemente debes declarar enlaces entre los datos del modelo y los elementos HTML y dejar al framework que haga el resto del trabajo.

Consulta la aplicación de muestra que es un ejemplo funcional que contiene los fragmentos de código utilizados en esta guía.

Angular proporciona muchas formas para manejar el enlace de datos. Los tipos de enlace se pueden agrupar en tres categorías que se distinguen de acuerdo a la dirección del flujo de datos:

• Desde el modelo-hacia-vista
• Desde la vista-hacia-modelo
• Secuencia Bidireccional: vista-hacia-modelo-hacia-vista

Tipo	Sintaxis	Categoría
Interpolación Propiedad Atributo Clase Estilos	<code-example> {{expression}} [target]="expression" bind-target="expression" </code-example> </td> <td> Una sola dirección<br>desde el modelo de datos<br>hacia la vista </td> <tr> <td> Evento </td> <td> <code-example> (target)="statement" on-target="statement" </code-example> </td> <td> Una sola dirección<br>desde la vista<br>hacia el modelo de datos </td> </tr> <tr> <td> Bidireccional </td> <td> <code-example> [(target)]="expression" bindon-target="expression" </code-example> </td> <td> Bidireccional </td> </tr>

Los tipos de enlace distintos a la interporlación tienen un nombre de destino hacia la izquierda del signo igual, están rodeados por los signos de puntación [] o (), o bien están precedidos por el prefijo: bind-, on-, bindon-.

El destino de un enlace es la propiedad o evento situado dentro de los signos de puntuación: [], () or [()].

Cada miembro público de una directiva fuente está disponible automaticamente para ser utilizada con los enlaces. No es necesario hacer nada especial para poder acceder al miembro de una directiva en una expresión o declaración de plantilla.

Enlace de Datos y el HTML

En condiciones normales para un desarrollo HTML, primero se crea la estructura visual con los elementos HTML y luego se modifican dichos elementos estableciendo los atributos de dichos elementos utilizando una cadena de caracteres.

<div class="special">HTML Simple</div>
<img src="images/item.png">
<button disabled>Guardar</button>

Usando el enlace de datos, puedes controlar cosas como el estado de un botón:

Puedes notar que el enlace se realiza a la propiedad disabled del elemento botón del DOM, no al atributo. Esto aplica al enlace de datos en general. El enlace de datos funciona con las propiedades de los elementos, componentes y directivas del DOM, no con los atributos HTML

{@a html-attribute-vs-dom-property}

Atributos HTML vs. Propiedades del DOM

Distinguir la diferencia entre un atributo HTML y una propiedad del DOM es clave para comprender como funciona el enlace en Angular. Los attributos son definidos por el HTML. Las propiedades se acceden desde los nodos del DOM (Document Object Model).

• Muy pocos atributos HTML tienen una relación 1:1 con las propiedades; por ejemplo el, id.

• Algunos atributos HTML no tienen su correspondencia en propiedades; como por ejemplo, aria-*.

• Algunas propiedades del DOM no tienen su correspondencia hacia atributos; como por ejemplo, textContent.

Es importante recordar que los atributos HTML y las propiedades del DOM son cosas muy diferentes, incluso cuando tienen el mismo nombre. En Angular, el único rol de los atributos HTML es el de inicializar el estado de los elementos y las directivas.

El enlace de plantilla funciona con propiedades y eventos, no con atributos.

Cuando escribes un enlace de datos, se trata exclusivamente sobre las propiedades del DOM and eventos del objeto de destino.

Esta regla general puede ayudarnos a crear un modelo mental de los atributos y las propiedades del DOM: Los atributos inicializan las propiedades del DOM y cuando eso ya esta hecho, los valores de las propiedades pueden cambiar, mientras que los atributos no lo pueden hacer.

Solamente hay una excepción a la regla. Los atributos pueden cambiarse usando el método setAttribute(), el cual re-inicializa las propiedades del DOM correspondientes.

Para más información, consulta la Documentación de Interfaces MDN que contiene los documentos de la API para todos los elementos estándar del DOM y sus propiedades. Comparar los atributos <td> atributos con las propiedades <td> propiedades nos proporciona un ejemplo útil para poder diferenciar estos dos términos de una mejor manera. En particular, se puede navegar de la página de atributos a la página de propiedades por medio del enlace "Interfaz del DOM", y navegar la jerarquía de la herencia hasta HTMLTableCellElement.

Ejemplo 1: un <input>

Cuando el navegador renderiza <input type="text" value="Sarah">, este crea un nodo correspondiente en el DOM con la propiedad value inicializada con el valor de "Sarah".

<input type="text" value="Sarah">

Cuando el usuario ingresa "Sally" dentro del <input>, la propiedad value del elemento del DOM se convierte en "Sally". Sin embargo, si tu revisas el atributo HTML value usando el método input.getAttribute('value'), puedes notar que el atributo no ha cambiado—por lo que returna el valor de "Sarah".

El atributo HTML value especifica el valor inicial; la propiedad del DOM value es el valor actual.

Para consultar los atributos vs las propiedades del DOM en una aplicación funcional, consulta la aplicación en especial para repasar la sintaxis de enlace.

Ejemplo 2: un botón desactivado

El atributo disabled es otro ejemplo. La propiedad del botón disabled property es false por defecto así que el botón esta activo.

Cuando añades el atributo disabled, su sola presencia inicializa la propiedad del botón disabled con el valor de true por lo que el botón esta desactivado.

<button disabled>Botón de Ejemplo</button>

Añadir y eliminar el atributo disabled desactiva y activa el botón. Sin embargo, el valor del atributo es irrelevante, lo cual es la razón del por qué no puedes activar un botón escribiendo <button disabled="false">Todavía Desactivado</button>.

Para controlar el estado de un botón, establece la propiedad disabled.

Aunque técnicamente podrías establecer el enlace de atributo [attr.disabled], los valores son diferentes ya que el enlace de propiedad necesita un valor booleano, mientras que el enlace de atributo correspondiente depende de que su valor sea null o no. Por lo que considera lo siguiente:

<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">

Por lo general usa enlace de propiedades sobre enlace de atributos ya que es más intuitivo (siendo un valor booleano), tienen una sintaxis corta y es más eficaz.

Para ver el ejemplo del botón disabled, consulta la aplicación en especial para revisar la sintaxis de enlace. Este ejemplo muestra como alternar la propiedad disabled desde el componente.

Tipos de enlace y objetivos

El objetivo de un enlace de datos se relaciona con algo del DOM. Dependiendo del tipo de enlace, el objetivo puede ser una propiedad (elemento, componente, o directiva), un evento (elemento, componente o directiva), o incluso algunas veces el nombre de un atributo. La siguiente tabla recoge los objetivos para los diferentes tipos de enlace.

Tipo	Objetivo	Ejemplos
Propiedad	Propiedad del elemento Propiedad del componente Propiedad de la directiva	src, hero, and ngClass in the following:
Evento	Evento del  elemento Evento del componente Evento de la  directiva	click, deleteRequest, and myClick in the following:
Bidireccional	Eventos y propiedades
Atributo	Atributo (la excepción)
Clase	Propiedad de una clase
Estilos	Propiedad de un estilo