Angular esencial

Directiva NgIf con el operador ELSE

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una de las novedades de Angular en la versión 4 es la capacidad de integrar un operador lógico ELSE para el uso de NgIF, además de utilizar una etiqueta semántica <ng-template>. En esta lección aprenderemos a crear contenido condicional robusto que pueda desplegarse en todas las condiciones posibles.
06:38

Transcripción

En esta lección, vamos a aprender cómo incorporar el operador lógico'else'. Acá yo estoy trabajando en una aplicación que básicamente está evaluando una condicional. Estoy utilizando la directiva'ngIf' para analizar un valor. Acá, abajo, estoy desplegando el resultado de ese valor. Como puedes ver, por ahora, ese valor no está definido y no me está mostrando ningún tipo de resultado. Si presiono uno de los botones, el valor que estoy evaluando dentro de esta casilla se vuelve'true' y la directiva'ngIf' despliega un texto. En el caso del segundo texto, yo estoy trabajando algo muy similar, pero también le cambio el valor y cuando cambio el valor a'false' oculto el texto. Si estás familiarizado con los operadores lógicos, y eso es común de muchos lenguajes de programación, debes saber que cuando utilizamos una condicional'if', generalmente nosotros estamos esperando de que un resultado sea válido. Pero también utilizamos como una ayuda el operador'else'para que se ejecute un código en caso de que la evaluación que estemos realizando no sea válida. Así que vamos a trabajar ese concepto dentro de este segundo texto. Puede ser que cuando el valor sea'false', nos muestre un texto suplementario. Vamos a examinar acá el código y vemos que yo estoy utilizando la directiva'ngIf' para evaluar dos diferentes variables: una llamada'valor1' y otra llamada'valor2'. En ambos casos, la directiva'ngIf' está desplegando u ocultando por completo el nodo en el que se encuentra, en este caso, este'div' en el que estamos utilizando el'ngIf'. Yo voy a modificar en este caso el'ngIf' del Texto 2 y voy a incorporar el operador'else'. Para hacer eso, simplemente vamos a dejar tal cual como se encuentra la evaluación, en este caso, de la variable'valor2', y voy a incluir un punto y coma, que es una separación lógica dentro de mi programa. Esto significa que vamos a evaluar hasta donde llega el punto y coma y ahora vamos a incluir acá el operador'else' y yo lo voy a agregar acá, que es lo que deseo que se ejecute cuando no existe un valor'true' para esta variable. Así que le voy a definir acá 'otro Texto'. Esto que está acá me va a servir a mí para desplegar un valor y el valor que voy a desplegar lo voy a incluir inmediatamente después del nodo que estamos evaluando. Esta parte es muy importante. Quiero que recuerdes que cuando estamos trabajando con una directiva dentro de Angular, el alcance que va a tener esta directiva va a ser dentro de la etiqueta en la que se encuentra, lo que significa que si nosotros incluimos la directiva'ngIf' dentro de esta etiqueta, todo lo que se encuentre dentro de ella, sea cierto o falso, va a ser afectado de acuerdo al valor que tenga esta variable, lo que significa que si queremos desplegar un valor –que sea, en este caso, suplementario –en el caso de que 'valor2'no sea "true"–, lo tenemos que poner siempre fuera de este nodo que estamos evaluando. Ahora, para desplegar esto, nosotros vamos a utilizar una etiqueta especial. En este caso vamos a utilizar una etiqueta llamada'ng' guion 'template'. También es importante aclarar que en versiones anteriores de Angular se utilizaba la etiqueta'template', así, pero esto fue eliminado a partir de la versión de Angular 4 por una cuestión de semántica. Así que para no tener problemas con la etiqueta nativa de HTML'template', vamos a utilizar la etiqueta específica de Angular, 'ng-template'. Ahora tenemos que asignarle un valor de una variable local, así que vamos a incluir este signo de gato o "hastag" o como le digan en tu país y le vamos a poner el nombre que asignamos acá. Así que ahora la lógica va a ser que vamos a evaluar este nodo y en el caso de que el'valor2'sea cierto, lo vamos a desplegar. Y en caso contrario, 'else' nos va a decir que despleguemos la plantilla que se encuentra con la variable'otroTexto'. Sabiendo eso, vamos a incluir acá un segundo texto que se va a mostrar en caso de que nuestra evaluación no funcione. Volvemos ahora a nuestra aplicación y el primer cambio –y esto es muy importante– quiero que notes que se está desplegando un texto. Cuando lo examinamos al inicio, no se estaba desplegando nada. Dependiendo de la forma que trabajes tu aplicación, en muchos casos vas a necesitar que los elementos que estás trabajando a través de la directiva'ngIf' se muestren o que aparezcan ocultos, así que en ambos casos tenemos las dos posibles combinaciones. En la primera, tenemos un valor que no se muestra en caso de que no tengamos definida la variable en la que vamos a trabajar. Y en el segundo caso tenemos un texto que se muestra, pero se muestra únicamente una condición en el caso de que el valor que estamos evaluando no sea cierto, así que vamos a tener lo que sería un texto por defecto o un elemento por defecto, todo depende de la estructura en que trabaje tu aplicación. Ahora volvemos acá, al botón llamado Texto 2. Este botón, básicamente y analicemos un poco el código, vamos a hacer que cuando hagamos clic dentro de este botón, la sintaxis que tiene es que'valor2' va a ser igual al opuesto de'valor2', así que si'valor2' es'true'el resultado va a ser que es'false'y viceversa. Volvemos a nuestra aplicación y vamos a evaluar eso. Acá, al final de mi aplicación, yo estoy desplegando también cuál es el valor que se está trabajando dentro de esta casilla. Sí que tenemos el texto por defecto que se está mostrando porque el'valor2'aún no está definido. Yo voy a hacer clic acá y al definirlo como opuesto, me va a dar un valor de'true' y me muestra el texto que yo deseo que se despliegue con esta variable, a través de la directiva'ngIf'. Si vuelvo a asignar mi variable, en este caso como'false', también se va a mostrar el resultado del operador'else' y así es como nosotros podemos mostrar u ocultar los diferentes elementos de una pantalla a través del operador lógico'else'de Angular 4.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.