String interpolation en Angular

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

4 comentarios

  1. Hi there! This is kind of off topic but I need some
    help from an established blog. Is it difficult to set up your own blog?
    I’m not very techincal but I can figure things out pretty quick.
    I’m thinking about creating my own but I’m not sure where to begin. Do you have any tips or suggestions?

    Thanks

  2. Good day! Would you mind if I share your blog with my zynga group?
    There’s a lot of people that I think would really appreciate your content.
    Please let me know. Thanks

  3. We are a gaggle of volunteers and starting a new scheme in our community.
    Your site provided us with helpful info to work on. You’ve performed an impressive process and our entire group might be thankful to you.
    quest bars http://tinyurl.com/49u8p8w7 quest bars

  4. Excellent blog you have here but I was curious about if
    you knew of any forums that cover the same topics talked about in this article?
    I’d really love to be a part of community where I can get comments from other experienced people
    that share the same interest. If you have any recommendations, please let me know.
    Bless you! ps4 games https://j.mp/3z5HwTp ps4 games

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar