En nuestra página hemos creado un contenedor con un texto y un botón debajo. Nuestro objetivo es que al pulsar el botón, el contenedor del texto aparezca y desaparezca:
Primero vamos a modificar la clase del fichero "body.component.ts" y le añadimos una propiedad llamada "mostrar" que inicializaremos a "true":
Después hacemos dos modificaciones en el fichero "body.component.html".
La primera modificación consiste en colocar la directiva "*ngIf" en el contenedor del texto e igualarla a la propiedad "mostrar" de la clase "BodyComponent" (que recordemos que inicializamos a "true" por defecto).
La segunda modificación consiste en añadir una función JavaScript al botón para que cada vez que se haga click, cambie el valor de la propiedad "mostrar" a su valor contrario (es decir, que cuando sea "true" cambie a "false" y cuando sea "false" cambie a "true"), logrando de esta forma que aparezca o desaparezca el texto cada vez que pulsemos en el botón:
Una vez hechas las modificaciones, entramos en nuestra página y comprobamos que cada vez que pulsamos el botón, aparece o desaparece el texto:
Es importante destacar que lo que hace la directiva "*ngIf" exactamente es eliminar de la página el código que hayamos marcado, no es que simplemente lo oculte. Es importante saber esto.
No hay comentarios:
Publicar un comentario