npm install @angular/fire firebase --save
npm i rxjs@latest rxjs-compat --save
2.3.1) Goto firebase site and get web configuration (Overview->web)
2.3.2) Add the config in app.module.ts
const settings = {timestampsInSnapshots: true};
const config = {
apiKey: 'YOUR_APIKEY',
authDomain: 'YOUR_AUTH_DOMAIN',
databaseURL: 'YOUR_DATABASE_URL',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
};
...
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore } from '@angular/fire/firestore';
...
const settings = {timestampsInSnapshots: true};
const config = {
apiKey: 'YOUR_APIKEY',
authDomain: 'YOUR_AUTH_DOMAIN',
databaseURL: 'YOUR_DATABASE_URL',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
};
...
@NgModule({
...
imports: [
...
AngularFireModule.initializeApp(config, settings)
],
...
providers: [
...
AngularFirestore
]
})
export class AppModule { }
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
...
export class AppComponent {
...
constructor(
public db: AngularFirestore
) { }
}
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore } from 'angularfire2/firestore';
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let item of items | async">
<pre>{{ item | json }}</pre>
</li>
</ul>
`
})
export class AppComponent {
public items: Observable<any[]>;
constructor(db: AngularFirestore) {
this.items = db.collection('/items').valueChanges();
}
}