Angular: ¿qué narices es eso del data binding y los pipes?
Siguiendo el curso de Deborah Kurata, en este artículo quiero explicar lo básico que he aprendido:
En la parte 1 vimos lo básico de Angular
En la parte 2 vimos como añadir lógica al html
Las páginas web necesitan ser interactivas:
Es decir nos interesa transmitir las propiedades de los Component al DOM (la vista) para por ejemplo cambiar el color del fondo de la página de blanco a negro. Y también necesitamos que los eventos de la vista sean comunicados al Component, por ejemplo, para implementar un botón con el cual mostrar / ocultar las imágenes de la lista de productos. En esta lección aprenderemos ambos conceptos.
Índice(Drive)
Vincular propiedades (property binding) 2
Event binding (manejar eventos) 5
Two way binding (vincular datos en los dos sentidos) 7
Transformando los datos mediante pipes 10
Vincular propiedades (property binding)
Si queremos pasar datos desde la Class a la Template, podemos usar property binding así:
Donde la propiedad a modificar en la vista se encierra en corchetes, y la propiedad que se pasa por valor se encierra en comillas. También podríamos conseguir el mismo resultado con el mecanismo que ya hemos visto de la interpolación:
Sin embargo para relacionar la Template [] con la Class ‘’, se prefiere el property binding porque permite la comunicación en los dos sentidos. La interpolación sería idónea en el siguiente caso:
Si tuviéramos que incluir la url de la imagen como subdominio de otra url, lo haríamos mediante interpolación.
En nuestra web de ejemplo ya podríamos ver las fotos de cada producto:
También se pueden ajustar otras propiedades como los tamaños y el margen:
Habiendo definido esas propiedades en la Class:
Quedando así algo más bonito:
Event binding (manejar eventos)
Para escuchar eventos, necesitamos encerrar el nombre del mismo en paréntesis (), e incluir el nombre del método a ejecutar entre comillas ‘’:
Es decir en el ejemplo anterior, se escucha el evento clic en el botón y se ejecuta el método toggleImage() (que tenemos que definir nosotros) en la Class.
Con ello podemos lograr tener un botón para enseñar / esconder las imágenes de los productos:
Two way binding (vincular datos en los dos sentidos)
Por ejemplo un campo de texto nos interesa que pase el contenido escrito desde la vista, Template, a los datos, Class; al igual que interesa que tras el procesado, la Class transmita los resultados para que sean visibles en la vista, Template:
Para ello usamos la directiva ngModel:
La encerramos entre [] corchetes para indicar property binding: desde la Class a la Template.
Y la encerramos entre paréntesis () para expresar event binding, desde la vista Template a los datos Class:
Curiosamente se llama a esta expresión banana in a box, porque los corchetes parecen la caja y los paréntesis los plátanos:
¿Y de dónde viene ngModel?
La idea es que hay que importarla para hacerla visible y usable, la cuestión es dónde está:
Está en FormsModule, módulo que hay que importar en el único módulo que tenemos nosotros en nuestra aplicación, para poder así usarlo.
Lo que podemos conseguir en nuestra página es escribir en un campo de texto y que lo escrito se refleje en la vista, así:
Transformando los datos mediante pipes
Nos interesa mostrar el precio con su moneda y en un formato uniforme ¿cómo lo hacemos?
La forma es usar pipes, en español tuberías, son formas de transformar los datos antes de mostrarlos, ya hay algunos incorporados para formatear fechas y monedas:
Por ejemplo si quisiéramos que todos los códigos de los productos se mostrasen en minúsculas:
El operador pipe, es |, y lowercase es un tipo ya definido.
Lo mismo si lo queremos en mayúsculas:
En la imagen superior se ve cómo integrar una pipe en la property binding, de forma que los
nombres de las imágenes que representan los productos estén todos en mayúsculas.
También se pueden encadenar:
Por ejemplo mostraríamos el precio como una moneda y en minúscula.
Además a las pipes se les pueden pasar argumentos:
Los argumentos se indican mediante : y en este caso expresamos que queremos que el símbolo de la moneda sea USD, true implica que sí queremos que se muestre la moneda, y ‘1.2–2’, el primer dígito, el 1, indica el número mínimo de cifras enteras, el siguiente, el .2 indica el número mínimo de cifras decimales, y el último -2 indica el máximo de cifras decimales.
Con lo cual en nuestra página conseguimos un formato uniforme:
Resumen de lo aprendido
En suma los métodos para comunicar propiedades son cuatro:
Por tanto hemos visto:
Cómo transmitir propiedades desde la Class al Template. Como vincular eventos desde la Template a la Class. Como manejar campos de texto vinculando en ambas direcciones Template y Class y por último cómo transformar los datos antes de mostrarlos con los pipes.
Repositorio de la autora para los archivos de inicio
https://github.com/DeborahK/Angular-GettingStarted
