Here is my app.module.ts code
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MyBudgetPage } from '../pages/my-budget/my-budget';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabase, AngularFireDatabaseModule, FirebaseListObservable } from 'angularfire2/database';
export const firebaseConfig = {
};
@NgModule({
declarations: [
MyApp,
HomePage,
MyBudgetPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
MyBudgetPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
AngularFireDatabase,
AngularFireDatabaseModule
]
})
export class AppModule {}
And Here is my home.html code
<ion-row *ngFor="let month of monthWiseBudget | async">
<ion-col col-6>{{month.Item}}</ion-col>
<ion-col col-3>{{month.Actual}}</ion-col>
<ion-col col-3>{{month.Spent}}</ion-col>
</ion-row>
And here is home.ts code
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
@IonicPage()
@Component({
selector: 'page-my-budget',
templateUrl: 'my-budget.html',
})
export class MyBudgetPage {
@ViewChild(Slides) slides: Slides;
monthWiseBudget:FirebaseListObservable<any[]>;
constructor(public navCtrl: NavController, public navParams: NavParams, angFire: AngularFireDatabase) {
this.monthWiseBudget = angFire.list('/Months');
}
What did you already try? Do you receive any errors? Does /Months exists in your fb database? Do you connect to it properly? questions questions questions…
I just started using Firebase and it works OK but I do not put in the providers section - just the imports:
try putting either public or private before
angFire: AngularFireDatabase
in your constructor
… No error But data is not reading
ionViewDidLoad()
{
this.monthWiseBudget = angFire.list(’/Months’);
}
Did you add this in your home,ts file,because I cannot find it…
I have tried this, But not working
Eventhough i removed those and checked but no use.
Thanks for your response vithika. I figured out issue and fixed
Thanks for every one