Como Integrar Firebase y Angular 7 + Listado de Datos desde Firebase – Parte 3 (Final)

Tutoriales

Demo Github

Vamos con la Parte Nro 3 en donde continuaremos con el tutorial anterior llamado Como Integrar Firebase y Angular 7 + Listado de Datos desde Firebase – Parte 2 y crearemos la ruta y configuraremos los elementos finales para listar los datos desde Firebase Realtime Database, vamos con el tutorial.

Capítulos

Ruta

Vamos a crear el módulo llamado AppRoutingModule en donde definiremos la ruta http://localhost:4200/#/listar-datos para listar los datos.

Abre tu consola de comandos y ejecuta el siguiente comando

Paso seguido ve a tu consola de comandos y crea manualmente el archivo app-routing.module.spec.ts ejecutando el siguiente comando

En la lista de carpetas y archivos de tu proyecto Angular se debe de haber creado 2 archivos llamados app-routing.module.spec.ts y app-routing.module.ts 

Abre el archivo app-routing.module.spec.ts y agrega el siguiente código

Luego abre el otro archivo llamado app-routing.module.ts y agrega lo siguiente, colocamos comentarios para explicar las partes más importantes del código

Últimas Configuraciones

Para este ejemplo vamos a crear un botón Listar Datos que al hacerle clic desaparecerá y pasará a listar los datos en su lugar

Abre el archivo llamado app.component.html y agrega lo siguiente, colocamos comentarios para explicar las partes más importantes del código

Paso seguido abre el archivo llamado app.component.spec.ts y agrega lo siguiente

Ahora abre el archivo llamado app.component.ts y agrega lo siguiente, colocamos comentarios en las partes más importantes del código

Por último abre el archivo app.module.ts y agrega lo siguiente, colocamos comentarios en las partes más importantes del código

Si ejecutamos nuestro proyecto

Y presionamos el botón Listar Datos, listaremos los datos que tenemos en Firebase Database Realtime

En nuestra base de Datos de Firebase tenemos los siguientes datos, específicamente son una lista de Postres

Al inicio de esta 3ra Parte del tutorial, colocamos una Demo para que veas el proyecto en funcionamiento y el repositorio GitHub para que puedas clonar o descargar los archivos.

Notas

  • Los pasos mencionados en este tutorial pueden cambiar en el futuro, esto no depende de nosotros si no de los desarrolladores que dan soporte a Firebase y Angular, estos suelen cambiar el orden de las opciones y los pasos en sus herramientas y servicios.

 

Síguenos en nuestras Redes Sociales 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