Crear una Notificación GDPR con Angular 6 + Cookie y Bootstrap 4

Demo Github

Hace poco salio el Reglamento de Protección de Datos, el cual obliga a todas las plataformas a que notifiquen sobre el uso de datos de los usuarios que usan y visitan una plataforma, esta información aun sigue en debate pero ya es obligatorio que todas las empresas la desplieguen a sus usuarios, vamos a trabajar con la versión de Angular 6 y Bootstrap 4 para la interface.

Trabajando con Angular 6

Abrimos la consola de comando de NodeJS (Command Prompt) Creamos un nuevo proyecto

Paso seguido abrimos el archivo app.component.ts y agregamos:

Trabajando con Bootstrap 4

Bien en mi vista voy a crear la notificación GDRP en la parte de abajo después de cerrar la etiqueta </footer> con el botón aceptar que llamará a la acción onGRDP con el evento para cerrar la notificación, esta acción la definimos en nuestro archivo app.component.ts :

Si ven le di el valor hidden]=”!visible” a la capa (div) para trabajar con la acción cerrar en mi componente app.component.ts .

En nuestro archivo app.component.css agregamos los estilos a los elementos de nuestra vista:

Y la Cookie ?

No olvidemos que parte del desarrollo agíl de Software es apoyarnos en librerias para entregar a tiempo los proyectos. Usaremos la libreria de Cookies ngx-cookie-service y si vieron el archivo de nuestro componente app.component.ts pueden ver que estamos desplegando una Cookie personalizada en el navegador.

Entonces cada ves que abrimos nuestro navegador veremos que nos setea una cookie.

Gracias a esta Cookie podrás controlar que al usuario no se le vuelva a mostrar más la notificación GDPR, solo tienes que crear el código necesario para manipular dicho evento.

Te invitamos a seguirnos en nuestras Redes Sociales y suscribirte a nuestro canal de Youtube para que no te pierdas nuestros próximos contenidos.

 

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required