Angular esencial

Desplegar u ocultar secciones con la directiva NgIf

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Una de las directivas más populares de Angular es NgIf, que permite mostrar u ocultar un bloque de código basado en la evaluación de una premisa. Si la misma es equivalente al booleano TRUE el bloque se muestra, o se oculta en caso contrario. En esta lección aprenderemos a utilizar esta directiva así como su capacidad para liberar memoria de una app al remover nodos del DOM.
08:09

Transcripción

En esta lección, vamos a explorar la directiva'ngIf'. Yo acá estoy trabajando en una aplicación hecha en Angular 4 a través de la línea de comando de Angular. Voy a buscar dentro de la carpeta'Src' la carpeta'App' y voy a modificar dos archivos. Primero vamos a abrir el componente inicial de nuestra aplicación y también vamos a abrir la plantilla correspondiente. En este caso, vamos a tener un valor que está desplegando esta variable y vamos a activar el servidor que nos va a mostrar una vista previa. Yo voy a modificar esta plantilla para desplegar algunos valores. En este caso voy a utilizar un'div' con una clase llamada'contenedor'. Dentro de este'div' voy a incluir otro'div'más y en él voy a incluir un'h1', que va a ser un titular. Y también tengo acá, en este caso, un texto de ejemplo que está dentro de un párrafo. Por ahora y antes de guardar, lo que me está mostrando mi aplicación es el mensaje que aparece por defecto. Una vez que yo guarde, vamos a tener acá una casilla de texto. Como puedes ver, ya tengo algunos estilos previamente asignados donde le estoy definiendo un tamaño y también le estoy definiendo un borde a este elemento. Ahora voy a incluir un segundo elemento exactamente igual, con la misma estructura, donde vamos a tener una clase 'contenedor'que engloba todo el contenido. Tenemos luego un'div', un'h1' y un párrafo. Guardamos y vemos los resultados. Tenemos básicamente dos textos. Ahora, ¿qué es lo que vamos a hacer? Vamos a trabajar con la directiva'ngIf'. Esta directiva nos va a permitir a nosotros mostrar o desplegar elementos, así que vamos a incluir también un par de botones que nos van a permitir a nosotros activar o desactivar los elementos de nuestra plantilla. En este caso yo voy a incluir una línea horizontal y también voy a incluir dos botones. Lo que vamos a hacer es que vamos a trabajar en el primer texto. Vamos a buscar este'div' que está acá, sin ninguna clase, este'div', donde se está desplegando todo el contenido que está dentro del Texto 1. Y acá vamos a agregar la directiva'ngIf'. En este caso, la directiva'ngIf'simplemente la tenemos que agregar utilizando la sintaxis asterisco y ponemos 'ng If'. Quiero que notes que la I está en mayúscula. Y acá vamos a desplegar una evaluación, o sea, vamos a evaluar que el valor que se encuentre dentro de estas comillas sea cierto y si es cierto, entonces, se va a desplegar este elemento. Así que por ahora simplemente vamos a poner 'valor 1'. Yo voy a guardar y vamos a ver el resultado dentro del navegador. En este caso, como'valor1'no está designado dentro de nuestra aplicación, vamos a ver que por ahora no se muestra el contenido. De hecho, si examinamos dentro de la estructura de nuestro HTML, vas a ver que, de hecho, el contenido por completo que se encuentra dentro de la clase'contenedor' ya ha sido eliminado del HTML. Eso significa que del todo, no va a aparecer dentro del código de nuestra aplicación. Esto puede ser útil en algunos casos cuando queremos eliminar elementos del "dom", porque nos puede mejorar el rendimiento a nivel de memoria. Ahora, ¿cómo vamos a definir este valor? Lo vamos a hacer bastante simple. Lo único que voy a hacer es que voy a agregar dentro del botón inicial, donde aparece'Texto 1', acá al final de mi documento voy a agregar un evento, en este caso simplemente voy a escuchar un evento'click' y voy a definir acá mismo el valor de, en este caso, la variable'valor1'. Así que vamos a poner'valor 1' es igual a 'true'. Vamos a guardar. Y también, para que lo podamos ver de una forma más intuitiva, voy a incluir acá una línea y voy a desplegar dentro de la plantilla cuál es el valor que tiene esta variable llamada'valor 1'. Vamos a guardar, veamos el resultado. Vamos a cerrar acá el Inspector y tenemos que dentro de este texto, al hacerle clic, yo voy a igualar la variable llamada'valor' y le voy a asignar un valor de'true' y eso significa que va a desplegarse el texto que por ahora está oculto. Voy a presionar, vemos que se asigna el valor y vemos que acá, al final, nos parece el valor'true'. Quiero que notes que al reiniciar, el valor que está desplegando esta variable no aparece. Esto es porque en este momento la variable aparece como nula. Si la variable es nula, va a ser también interpretada como un valor de'falso' y eso significa que no nos va a aparecer el texto que estamos definiendo acá. Ahora vamos a hacer una técnica similar con este segundo texto, simplemente para darte un consejo de una forma sencilla, para poder trabajar con estos valores. Yo voy a modificar acá el valor que aparece dentro del'click' y vamos a hacer, entonces, que cuando se haga clic dentro del botón llamado Texto 2, vamos a asignar el'valor 2'–en este caso va a ser una variable que todavía no existe– y le vamos a asignar la sintaxis: 'valor 2'. Esto significa que cada vez que hagamos clic, 'valor2'va a tener el opuesto del valor que tenía antes. Y esto simplemente lo que va hacer es que nos va a permitir a nosotros mostrar y ocultar un elemento. Ahora, una vez que ya tenemos definido eso, vamos a copiar también el mismo concepto del'ngIf' dentro del nodo que queremos ocultar, en este caso la etiqueta'div'. Le vamos a poner asterisco 'ngIf' 'valor1'. En este caso va a ser'valor2', que es la variable que vamos a estar controlando desde el botón de acá. Repetimos también el mismo proceso acá para que podamos ver cuál es el valor que se está desplegando en esa variable y ya tenemos listo el resultado final de esta lección. Y vemos que por ahora no se está mostrando ningún texto. Esto significa que, como vemos acá abajo, ambas variables no están definidas, eso significa que el valor es'false' y la evaluación de la directiva'ngIf'nos dice que ambos valores son falsos y por ende los dos nodos que se encuentran acá deben estar ocultos. Presionamos el Texto 1 y asignamos un valor de'true' a la primera variable y vemos que se despliega el valor. Ahora, una vez que ya nosotros hagamos clic, va a mantener este valor, así que vamos a desplegar este texto. En el segundo caso, vamos a modificar el valor de la variable y le vamos a asignar que sea'true', ¿sí? Pero si volvemos a hacer clic, le vamos a asignar un valor de'false' y esto va a ocultar el elemento. Así es como se está haciendo la evaluación dentro del'ngIf' y, al designar como un valor falso, oculta el nodo que está controlando la directiva'ngIf'. De esta forma, nosotros podemos desplegar y ocultar elementos dentro de una aplicación, pero también teniendo en cuenta que al ocultarlo, ocultamos el nodo completo, estamos también haciendo una cierta liberación de memoria, lo cual puede hacer que nuestras aplicaciones pueden incluso llegar a ser más eficientes.

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.