Binding

Binding ser refiere a los métodos que provee Angular/Ionic para comunicar los datos desde las páginas/componentes y las plantillas asociadas. Para esto Angular define cuatro posibles formas de realizar el binding:

1. Interpolación de variables de los componentes en el código HTML.

2. Binding de propiedades de las etiquetas HTML.

3. Binding de eventos de las etiquetas HTML sobre métodos del componente.

4. Binding bidireccional entre el componente y el HTML.

En la siguiente figura se incluye un resumen de los cuatro tipos de binding disponibles, cómo usarlos y el sentido (representado por la flecha) en el que se realiza el binding:

A continuación veremos cómo utilizar cada tipo de binding por separado:

Binding de variables

Este tipo de binding nos permite utilizar las variables definidas en el componente directamente en la plantilla. Para esto simplemente tenemos que escribir el nombre de la variable entre llaves dobles ({{variable}}), y ya está, sin acer nada más aparecerá en la plantilla el valor de dicha variable. Por ejemplo, si en el componente tenemos las siguiente variables:

export class HomePage {
  nombre: string = 'Pedro';
  edad: number = 25;
  dir: {calle: string, num: number};
  constructor() {
    this.nombre = 'Pedro';
    this.edad = 25;
    this.dir = {calle:'C/calle', num: 16};
  }
}

Podríamos obtener su valor desde la plantilla de la forma:

<p><strong>Nombre:</strong>{{nombre}}</p>
<p><strong>Edad:</strong>{{edad}}</p>
<p><strong>Dirección:</strong>{{dir.calle +' '+ dir.num}}</p>

En el ejemplo anterior se puede ver como se usa el punto (.) para acceder a la propiedad de un objeto.

Binding de propiedades

En el caso de que queramos establecer el valor de una propiedad o atributo de una etiqueta tendremos que hacer uso del binding de propiedades. Para esto escribiremos el nombre del atributo entre corchetes y le asignaremos el valor de una variable definida en el componente ([atributo]="variable"). A continuación se incluyen dos ejemplos de uso:

<img [src]="logoUrl">
<button [disabled]="isDisabled">Púlsame</button>

Y en el controlador asociado deberíamos tener definidas estas variables:

export class MyComponent {
  logoUrl: string = '/assets/logo.png';
  isDisabled: boolean = true;
}

En la mayoría de los casos podríamos realizar este binding usando también la interpolación. Sin embargo Angular recomienda usar este otro tipo por legibilidad y también para asegurarnos de que no se realiza ninguna otra acción al asignar el valor a la propiedad (con la interpolación se evalúa el contenido que hay entre las llaves dobles {{ }} mientras que de esta forma solamente se sustituye).

Binding de eventos

El binding de eventos permite asociar una función a un determinado evento producido sobre la vista. En este caso el binding funciona en el sentido contario, desde la vista hacia el componente. Es decir, el evento se define en la vista y utiliza una función definida en el componente para responder a él.

Para utilizar este tipo de binding escribiremos el nombre del evento entre paréntesis y le asignaremos el nombre de la función a utilizar, por ejemplo:

<button (click)="botonPulsado()">Púlsame!</button>

Y en el controlador asociado tendríamos definida la función:

botonPulsado() {
    console.log('Se ha pulsado el botón!');
}

Binding bidireccional

El binding bidireccional nos permite asociar en ambas direcciones una etiqueta con una variable. Por lo tanto, tanto si se produce un cambio en la vista como si se produce en el componente, dicho cambio se verá reflejado en el otro.

Este tipo de binding es muy útil para los formularios en los que queremos asociar el valor de un campo con una variable, de forma que inicialmente el campo se rellene con el contenido de la variable y cuando el usuario escriba algo se actualice el valor de dicha variable.

Por ejemplo, imaginemos que tenemos el siguiente código en la plantilla:

<ion-label fixed>Nombre</ion-label>
<ion-input [(ngModel)]="nombre" name="nombre" type="text"></ion-input>

En el componente simplemente tendríamos que definir la variable "nombre", para asociarla con el input y de esa forma recuperar el texto escrito por el usuario. Además, si le asignamos un valor inicial veríamos como el input aparecería rellenado con dicho valor.