Hoy aprenderemos a utilizar el Two-way data bindind en Angular 2.
Hasta ahora estábamos usando el binding por interpolación que simplemente nos permitía mostrar el valor de las propiedades de la clase de nuestro componente en la plantilla, muy simple, solamente mostrábamos datos.
El two-way data binding en Angular 2 nos permite modificar el valor de una propiedad de forma bidireccional, de forma que cuando nosotros modificamos el valor de una propiedad en la vista el valor también se actualiza en el modelo de datos. Resumiendo cambiamos el valor de una propiedad con una caja de texto en la vista, ese valor se cambia en la vista y también en el componente.
Veamos un ejemplo de esto en código:
// Importar el núcleo de Angular
import {Component} from '@angular/core';
// Decorador component, indicamos en que etiqueta se va a cargar la plantilla
@Component({
selector: 'my-app',
template: `<h2>Two-way data bindind Angular 2</h2>
<p>
Cambiar titulo:
<!--Usamos la directiva ngModel para el two-way data binding-->
<input type="text" [(ngModel)] = "pelicula.titulo" />
</p>
<!--Mostramos el valor de la propiedad-->
<p>Mostrar titulo: {{pelicula.titulo}}</p>
`
})
// Clase del componente donde irán los datos y funcionalidades
export class AppComponent {
// Propiedad
public pelicula;
constructor(){
// Asignamos un valor a la propiedad
this.pelicula = {id: 1, titulo: "La verdad duele", anio: 2016};
}
}
El resultado por pantalla es este:
Hemos cambiado el titulo de la película y ahora podemos utilizar el nuevo valor de la propiedad como más nos convenga.
