Firebase Realtime Database Ionic returning null - html

Question

I'm trying to incorporate a Firebase database into my Ionic application using Angular. I was following the instructions laid out on the AngularFire github page (https://github.com/angular/angularfire2) but when I actually run the application I keep getting a null response. I also am confused on the input of the of the db.object method (db.object('item')). What does 'item' actually represent?
This is my app.component.ts file
import { Component } from '#angular/core';
import { Platform } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { MenuController } from '#ionic/angular';
import { AngularFireDatabase } from '#angular/fire/database';
import { Observable } from 'rxjs';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
item: Observable<any>;
example: Observable<any>;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private menu: MenuController,
private db: AngularFireDatabase
){
this.item = db.object('item').valueChanges();
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
close(){
this.menu.close();
}
}
This is my app.component.html file
<ion-app>
<ion-menu side="start" menuId="first">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Hi</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item [routerLink]="['/orders']" routerLinkActive="active" (click)="close()" >My Orders</ion-item>
<ion-item [routerLink]="['/apps']" routerLinkActive="active" (click)="close()">My</ion-item>
<ion-item [routerLink]="['/pres']" routerLinkActive="active" (click)="close()">My</ion-item>
<ion-item>{{ (item | async)?.name }}</ion-item>
</ion-list>
<li class="text" *ngFor="let item of items | async">
{{ item | json }}
</li>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
This is my app.module.ts file
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AngularFireModule } from '#angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule } from '#angular/fire/firestore';
import { AngularFireDatabaseModule } from '#angular/fire/database';
import { AngularFireAuthModule } from '#angular/fire/auth';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, FormsModule, IonicModule.forRoot(), AppRoutingModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, AngularFireAuthModule],
providers: [
StatusBar,
GooglePlus,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Image of my Firebase database. This is what can be seen right underneath my app name: https://pasteboard.co/HTxY5eC.png

Answer 1

Hi Kiran and welcome to SO. You went way overkill on how much information you provided, but rather be safe than sorry - right?
In the example you're looking at item is the node in the database. I take it you're also fairly new to Firebase, so I won't assume anything.... Have you played around with the Firebase console yet? (https://console.firebase.google.com/project/PROJECT_NAME/database/PROJECT_NAME/data) The view that allows you to see the contents of your Real-Time Database? Play around in there and add a few "nodes" in the database. They have nicely coordinated colors for when you add, edit, and remove data... pretty cool, right? Now erase your test nodes and create a node named "item", and add a few child nodes.
In your code this.item = db.object('item').valueChanges(); listens to the changes in the information stored in the item node of your database... and sticks it into the this.item variable. Your HTML file loops over any contents of the this.item variable and displays it via *ngFor="let item of items | async
So long story short - your original question... item isn't anything special - make it whatever you call your database node. You're getting null because right now you are missing a node in your DB with a matching name of item