Angular 2 avanzado: Gestión de archivos en PHP

Ocultar o mostrar elementos de un documento con NgIf

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Es muy común que en una aplicación moderna tengamos componentes que solo se muestran de acuerdo a la interacción del usuario o a eventos específicos. En esta lección te voy a mostrar cómo usar la directiva NgIf para administrar los componentes en pantalla.
07:47

Transcripción

En esta lección vamos a aprender cómo ocultar y desplegar elementos dentro de una aplicación. Yo acá estoy trabajando con una aplicación que despliega archivos que se encuentran dentro de una carpeta externa. Como puedes ver, acá estoy desplegando un ícono, el nombre de un documento y el tamaño También tengo una sección con algunas herramientas que me permiten a mí modificar este documento. Vamos a cambiar el funcionamiento que tiene este componente para que cuando entremos en el modo de edición podamos ocultar la información que está acá y nos muestre un formulario de entrada de datos para poder insertar un nuevo nombre. Para eso, lo que vamos hacer es que vamos a entrar dentro de la plantilla de este componente. En este caso yo estoy trabajando cada una de las líneas que aparecen acá como un componente de Angular. Y el componente se llama "item-archivo.component.ts" que es donde se encuentra el código de mi aplicación. Acá yo voy incluir una nueva variable que va a ser de tipo booleano. Las variables de tipo booleano son las que nos permiten únicamente valores que sean cierto o falso. Así que vamos a tomar esta variable y vamos a ir a la plantilla. En este caso es "item-archivo.component.html". Vamos a hacer que los contenidos se muestren de acuerdo a la presencia o ausencia de esta variable. Yo voy a tomar la información que se encuentra dentro de este componente. Podemos ver que acá vemos el nombre, el tamaño y la sección donde se muestran las herramientas para modificar el archivo. Y vamos a incluir "div", acá lo estoy cerrando, y voy al inicio del documento y voy a abrir este "div" y este "div" va a mostrar información únicamente si el valor que tenemos dentro de la variable "edicionActiva" está habilitado. Ahora, una variable booleana nos va a devolver un valor cierto o falso. Si yo no la he inicializado dentro de mi documento, entonces, lo que voy a tener es un valor por defecto de falso. Así que vamos a trabajar con ese con ese concepto. Y voy a incluir la directiva "ngIf". Para esto voy a incluir la sintaxis de asterisco y voy a anotar la directiva "ngIf" y vamos a definir cuál va a ser el valor que vamos a evaluar, en este caso, "edicionActiva". Entonces, básicamente, lo que le estoy diciendo a Angular es que esta información se va a mostrar únicamente si el valor de "edicionActiva" es "true". En este momento, como no la he inicializado, entonces el valor es "false". Lo que significa que si revisamos nuestra aplicación, el bloque que estaba mostrando no se ve. Vamos a hacer el opuesto, que vamos a decir que se muestre únicamente si el valor es "false". De nuevo, como no la he inicializado dentro de mi aplicación sabemos que el valor es "false". Revisamos y se muestra la información. Una vez más, solamente para recapitular, cuando utilizamos "ngIf" significa que vamos a desplegar el componente en el que se encuentra si el resultado de la expresión que estamos evaluando devuelve "true". Si devuelve un "false", entonces vamos a ocultar la información. Ahora, una vez que he incluido este signo y que estoy definiendo que el valor que se encuentra dentro de esta variable sea "false", estoy mostrando los datos que van a aparecer por defecto. También voy a mostrar otro bloque de datos que se va mostrar cuando nosotros habilitemos el valor de "edicionActiva". Voy a crear un nuevo "div" que también va a tener un "ngIf". En este caso, vamos a evaluar exactamente el valor opuesto. Sólo se va a mostrar si el valor de "edicionActiva" es verdadero. Así lo que vamos hacer, es que solamente uno de estos dos bloques se va a mostrar a la vez. Porque recordemos que un valor booleano solamente puede tener un valor que es cierto o falso. Dependiendo de cada uno de estos valores vamos a desplegar un bloque. Ahora, qué información vamos a poner en este bloque. Lo que vamos a poner es una entrada de texto y también vamos a poner dos botones. La entrada de texto la vamos a definir como "type text" para recibir texto. Y cada uno de estos botones vamos a ponerles, rápidamente, solamente el valor "OK" y "Cancelar". Vamos a guardar y revisemos el resultado. Ahora lo que está pasando es que no tenemos forma de mostrar la información del segundo bloque. Para eso yo voy a habilitar el botón de edición. En este caso lo tenemos dentro de la clase "item editar". Tenemos acá este ícono que lo está desplegando. Entonces, vamos a adjuntarlo con el evento "click", el cual ponemos utilizando la sintaxis de paréntesis. Y vamos a habilitar una función que se va a llamar "activarEdicion". Vamos a copiarlo. Vamos al código de este componente. Vamos a llamar la función "activarEdicion", la vamos a definir, vamos a decir que el resultado sea "void". Y, básicamente acá, lo que vamos a hacer es a tomar "edicionActiva" y vamos a decir que en este momento "edicionActiva" es igual a "true" Tenemos que definir el "scope". En este caso, es "this.edicionActiva" para que sea el alcance correcto. Vamos a guardar. Y también necesitamos activar otro elemento. Una vez que activamos la edición necesitamos también ocultarla. Así que yo voy al botón "Cancelar" y acá le voy asignar también un evento. Vamos a copiar, para hacer esto un poco más rápido. Voy a copiar un evento y en este caso va a ser "desactivarEdicion". Vamos a copiar este mismo método y voy a buscar en el código de mi aplicación. Voy a copiar exactamente el mismo código que tengo en "activarEdicion". Tenemos un método que devuelve "void". Y, en este caso, en vez de definir "edicionActiva" como "true" la definimos como "false". Ya tenemos el código de nuestra aplicación listo. Vamos a revisar el resultado final. Veremos que el botón de editar, al hacer clic, activa el valor de la variable. Desaparecen los valores que teníamos del archivo. Podemos incluir información y al presionar ""Cancelar"" ocultamos los valores porque cambiamos el valor de la variable, en este caso booleana. Así es como podemos hacer que aparezcan o desaparezcan elementos de una aplicación utilizando variables y utilizando Angular 2.

Angular 2 avanzado: Gestión de archivos en PHP

Aprende a crear vínculos entre PHP y Angular 2 mediante un ejemplo práctico en el que trabajarás del lado del servidor con PHP y la parte web con la tecnología Angular de Google.

3:20 horas (33 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:19/04/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.