¿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!