¿Qué es el Data Biding?
El data biding, es la forma mediante a la cual Angular nos va a permitir mostrar contenido dinámico (que puede cambiar) en vez de contenido estático/fijo (en inglés conocido bajo el termino de harcoded). Por tanto, el databiding es la comunicación, la sincronización entre nuestro template (la vista .html) y nuestra lógica de programación (archivo.ts).
Existen distintos mecanismos para realizar data biding:
Esta comunicación entre los archivos de TypeScript y las templates, las realizamos mediante a DOM:
En este artículo, nos centraremos en el primero, string interpolation.
¿Qué es String interpolation?
La interpolación es el mecanismo más básico de realizar data biding mediante el cual vamos a enviar valores o funciones contenidas dentro de nuestro código de TypeScript de nuestro componente hacía nuestro template (el archivo html). También nos permitirán realizar evaluaciones de expresiones.
El proceso de interpolación es unidireccional y solo puede ir en la siguiente dirección de nuestro TypeScript hacía nuestro document HTML, pero no a la inversa.
En Interpolación se utiliza la sintaxis {{ valor }}
como podéis observar, se usan las dobles llaves {{}}, que por su apariencia visual es conocida como sintaxis moustache debido a su similitud con un mostacho o bigote🧔🏻.
Creando un proyecto sobre el que realizar el ejemplo
Vamos a ver un ejemplo. Para ello, creamos e iniciamos un proyecto:
Una vez creado el proyecto, nos situamos en el y lo abrimos con VCS:
Y finalmente arrancamos el proyecto:
Lo que nos abrirá una ventana con nuestra template inicial del proyecto:
Mostrando el valor de una variable con String Interpolation
Finalmente borramos la template que viene por defecto y escribimos un H1 en el que metemos entre {{}} la variable de la que queremos mostrar su valor en la pantalla.
En este caso, si miramos la aplicación, veremos que hemos obtenido el valor correctamente:
También podemos imprimir las propidades de un objeto. Vamos a ver un ejemplo:
En este caso, es visible dentro del template debido a que la variable nombre está dentro del una clase con export sino no sería visible. Y por tanto, será visible a nivel de nuestro módulo.
Evaluando una expresión con String Interpolation
También podemos realizar operaciones, vamos a ver un ejemplo:
Llamando a una función con String Interpolation
Vamos a realizar dos funciones, numberRandom que nos genere un número del uno al 10 y evenOrOdd que nos indique si el número es par o impar. Si juntamos las llamadas podemos ver el siguiente resultado:
Esto es todo, espero que os haya gustado. ¡Un saludo y hasta la próxima!