Hi, I am trying to get the list of names from my Firebase Realtime Database. Below you will see the steps I have taken to do this. However, my problem is that nothing is showing when I am on the page! If anyone have any better suggestions, please let me know! To note: I am only reading the data from Firebase, not writing, deleting or creating.
Firebase Database Structure:
0
Email: "someoneEmail@gmail.com"
Location: "Building 0"
Name: "Someone Name"
Phone Number: "333-3333"
Copy my credentials to a a new file in src/app/credentials.ts
export var firebaseConfig = {
apiKey: "Your credentials here",
authDomain: "Your credentials here",
databaseURL: "Your credentials here",
projectId: "Your credentials here",
storageBucket: "Your credentials here",
messagingSenderId: "Your credentials here",
};
Initialized Firebase in app.module.ts and inside @NgModule() look for your imports array
import { firebaseConfig } from './credentials';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
// This is inside @NgModule()
import { AngularFireDatabaseModule } from '@angular/fire/database';
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
AngularFireModule.initializeApp(firebaseConfig), AngularFirestoreModule, AngularFireDatabaseModule],
Added this line inside the initializeApp function for running the Firebase configuration in app.component.ts.
firebase.initializeApp(firebaseConfig);
Open and edit src/app/directory/directory-list.page.ts then add this import.
import * as firebase from 'firebase';
import { LoadingController } from '@ionic/angular';
Declare variables before the constructor to hold list and referencing Firebase database.
infos = [];
ref = firebase.database().ref('infos/');
Add this Firebase function to listening any value changes from Firebase Database.
constructor(private router:Router , private location:Location,public loadingController: LoadingController) {
this.ref.on('value', resp => {
this.infos = [];
this.infos = snapshotToArray(resp);
});
}
Add this constant function below the Class block for converting Firebase response to an array.
export const snapshotToArray = snapshot => {
let returnArr = [];
snapshot.forEach(childSnapshot => {
let item = childSnapshot.val();
item.key = childSnapshot.key;
returnArr.push(item);
});
return returnArr;
};
Trying to show the list in directory-list.page.html
<ion-content>
<ion-card *ngFor="let info of infos">
<ion-card-header>
{{ info.Name }}
</ion-card-header>
</ion-card>
</ion-content>
Again, my problem is that nothing is actually showing, the page is just blank except for the styling of the background. Therefore, I am not getting the list of names from Firebase Realtime Database. I really need help as soon as possible
