Angular: Binding Vista/Modelo o "Formulario HTML/Componente TypeScript"

Vamos a ver cómo la librería @angular/forms enlaza las vistas, los controladores y los modelos, o cómo enlazar campos de html con atributos del componente TypeScript.



Binding: Es el concepto de enlace entre elementos html de las vistas y propiedades de modelos de datos. Para realizar el binding usaremos directivas en ambos sentidos.

Enlace del modelo hacia la vista

La interpolación entre {{ }}: Esas dobles llaves encierran expresiones que se evaluarán en tiempo de ejecución. La llamamos directiva de interpolación y es la manera más cómoda y usual de mostrar contenido dinámico en Angular. La expresión entre las llaves hace referencia a variables que se obtienen de las propiedades de la clase controladora del componente:

<mark [class]="counterClass">{{ numContacts }}</mark>

Para éste ejemplo, en el componente habrá una variable llamada "numContacts" cuyo valor se mostrará en el HTML.

Los atributos evaluados []: En Html disponemos de atributos para asignar valores a propiedades de los elementos. Esos atributos reciben los valores como constantes. Pero, si se encierran entre corchetes se convierten en un evaluador de expresiones y puede recibir una variable o cualquier otra expresión. Como por ejemplo usando una clase css cuyo valor cambia en tiempo de ejecución:

<mark [class]="counterClass">{{ numContacts }}</mark>

Enlace de la vista hacia el modelo

Las clases CSS como atributos especiales: Para el caso concreto de determinar las clases CSS aplicables a un elemento de manera dinámica, usaremos la directiva ngClass. La cual recibe un objeto cuyas propiedades son nombres de clases CSS y sus valores son expresiones booleanas. Si se cumplen se aplica la clase y si no, se quita la clase.

[ngClass]="{ 'hidden' : formHidden }"

En este caso se oculta el elemento dependiendo del valor de la expresión "formHidden". Pero ¿Cómo se manipula esa variable?

Los eventos (): Cualquier evento asociado a un elemento puede ejecutar una instrucción sin más que incluirlo entre paréntesis. Idealmente dicha instrucción debe llamar a un método o función de la clase controladora. Aunque si es trivial puedes dejarla en el Html.

(click)="formHidden = true"

Doble Binding: La comunicación del modelo hacia la vista es sólo el principio. En Angular también podrás comunicar la vista hacia el modelo, permitiéndole al usuario modificar los datos a través de formularios. Es lo que se conoce como double binding.

El doble enlace al modelo [(ngModel)]: La directiva [(ngModel)] se compone de un atributo custom ngModel y lo rodea de los símbolos [()]. Esta técnica es conocida como banana in a box porque su sintaxis requiere un () dentro de un [] y une las capacidades de las expresiones y los eventos facilitando la comunicación bidireccional.

[(ngModel)]="model.property"

Usa la comunicación en ambos sentidos:
(banana): de la vista al modelo.
[box]: del modelo a la vista.
Atención: La directiva ngModel viene dentro del módulo FormsModule que hay que importar explícitamente.

Por ejemplo: [(ngModel)]="contact.name" enlaza doblemente la propiedad del modelo contact.name con el elemento <input> de la vista. Cada tecleo del usuario se registra en la variable. Y el valor de la variable se muestra en el <input>.

Dada un modelo como este en contacts.component.ts:

public contact = { name: '' };

Podemos enlazarlos en la plantilla:

<section>
  <label for="name">Name</label>
  <input name="name" type="text" [(ngModel)]="contact.name" placeholder="Contact name" />
</section>

Así, cada vez que escribamos en la caja de texto, el valor se guardará en el atributo del componente, y viceversa, si modificamos mediante código el valor del atributo, el nuevo valor se mostrará en la caja de texto.

Podemos decir que las propiedades públicas de la clase actuarán como binding de datos con la vista. Mientras que los métodos públicos serán invocados desde los eventos de la misma vista.