Angular 2 avanzado: Trabajo con APIs

Mostrar u ocultar ítems con ngIF

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una parte importante de una aplicación es controlar los elementos gráficos que se muestran u ocultan de acuerdo al flujo lógico de la aplicación. En esta lección aprenderemos a utilizar la directiva ngIf para controlar la visibilidad de objetos.
04:47

Transcripción

En esta lección vamos a aprender cómo ocultar y mostrar elementos dentro de una aplicación. Yo voy a entrar acá a mi aplicación, específicamente al componente que está administrando cada uno de los ítems que se están desplegando en él. Este componente se llama "tarea-individual". Vamos a entrar a él y dentro de este componente yo voy a buscar la plantilla. Acá yo tengo una barra de herramientas. Yo voy a hacer que esta barra de herramientas, en el momento en que nosotros activemos la opción de editar, se oculten elementos. ¿Cómo vamos a hacer para ocultar elementos? Bueno, primero vamos a envolver, agrupar todos elementos que están dentro de este documento, dentro de un "div", y esto nos va a permitir a nosotros administrarlos utilizando una directiva llamada "ngIf", que podemos utilizar para ocultar o desplegar elementos. Ahora "ngIf" va a ocultar los elementos que se encuentran dentro de la etiqueta en la que se encuentra si de alguna forma nosotros le ha asignamos un valor que sea "false". Si nosotros asignamos acá un valor que sea "true", un booleano que sea cierto, lo que va a pasar es que se va a mostrar el contenido que está acá. Ahora yo voy a crear una variable que sea "mostrarDatos". Esta variable "mostrarDatos" no se encuentra definida aún dentro de la aplicación, lo cual significa que me va a devolver un valor de "false" y entonces se va a ocultar la información que está acá. Guardemos la aplicación y veamos el resultado dentro del navegador, vemos que se está ocultando toda la información. Vuelvo acá a mi aplicación y yo deseo que este bloque se muestre en caso de que "mostrarDatos" aún no esté habilitado. Así que voy a evaluar utilizando el operador con signo de admiración. Lo que voy a evaluar es que este concepto sea falso. Entonces vamos a hacer una doble negación. Vamos a ver que en el caso de "ngIf" se va a mostrar solamente si es falso el hecho de que 'mostrarDatos'sea falso. Así que en este caso doble falso nos devuelve cierto. Entonces vamos a mostrar la información porque efectivamente lo que estamos preguntando es que se muestre solamente si "mostrarDatos" es falso. Guardamos la información, desplegamos el resultado y vemos que ahora se está mostrando nuestra aplicación. El siguiente paso es que vamos a hacer que esta información se pueda ocultar a discreción. Esto lo vamos a hacer utilizando en este caso el botón de Editar. Yo le voy a asignar una conducta que va a ser en este caso el botón Clic y vamos a activar el modo de edición. Y al definir "activarEdición", entonces lo que vamos a hacer es que vamos a definir "mostrarDatos2 como cierto para que oculte este bloque de código. Voy a copiar el nombre, voy a ir a la sección de programación donde se encuentra "tarea-individual. component. ts" y voy a crear este nuevo método, que se va a llamar así, "activarEdición", que no va a tener ningún parámetro ni va a devolver ningún resultado, así que lo definimos como "void". Y lo que vamos a hacer es que vamos a tomar este valor que se llama "mostrarDatos", vamos a definir esta variable dentro de nuestra aplicación, la vamos a definir como de tipo booleano y no le hemos asignado ningún valor, así que va a permanecer en un estado de "false". Y dentro de "activarEdicion" vamos a llamarla como "this. mostrarDatos", y ahora sí, le vamos a definir el valor de "true", cierto. Y vamos a poder ocultar o mostrar información dentro de nuestra aplicación. Vamos a ver, al entrar en modo edición, tenemos acá un error, vamos a inspeccionar qué es lo que está sucediendo dentro de la consola. Vamos a revisar nuestra aplicación y aún no hemos salvado la plantilla. Vamos a guardar la plantilla, es importante que siempre guardemos la información para que se pueda desplegar el resultado. Y ahora sí, ya tenemos asignado el evento y puedo ocultar los datos de mi aplicación.

Angular 2 avanzado: Trabajo con APIs

Comprende el funcionamiento de una API y cómo llevar a cabo sus procesos, así como controlar su funcionamiento mediante Angular 2, gracias a este ejemplo práctico.

3:02 horas (29 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:4/05/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.