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

4 minuto(s)

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.

Partes

Ruta

Vamos a crear el módulo llamado AppRoutingModule en donde definiremos la ruta https://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.