I have running my application perfectly with
"@angular/fire": "^6.1.5",
"firebase": "^8.6.3",
and it was like
Service.ts
getUserEventSummary(userId) {
this.firestore.collection(`/user/${userId}/event_summary`).doc('current').snapshotChanges().pipe(
map(changes => changes.payload.data())
);
}
Component.ts
this.service.getUserEventSummary(this.userId).subscribe((res: any) => {
this.values = res;
}
And such code is all over the application. Now I have moved to the latest version of firebase that is
"firebase": "^9.0.1", "@angular/fire": "^7.0.4",
And new changes are
service.ts
getUserEventSummary(userId) {
return onSnapshot(doc(db, 'general_lookup', 'onboarding_page'), (document) => {
return document.data();
});
}
And component.ts
const data = this.homeService.getOnboaringCollection();
console.log(data);
But I am getting nothing on console.
As per described here Looks like I have to manage it inside component file.
Does it is only option to work with onSnapshot ?
Please help me with a better approach than changing the code of components.
After lots of digging I was able to find the following solution that will allow you to return the snapshots in a similar fashion that snapshotChanges previously would.
Service:
import { Injectable } from '@angular/core';
import {doc, docSnapshots, Firestore} from '@angular/fire/firestore';
import {map} from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class ExampleService {
constructor(private firestore: Firestore) {}
async getUserEventSummary() {
const ref = doc(this.firestore, 'general_lookup', 'onboarding_page');
return docSnapshots(ref).pipe(map(data => data.data()));
}
}
Component:
import {Component, OnInit} from '@angular/core';
import {ExampleService} from "./services/example.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(private service: ExampleService) {}
async ngOnInit(): Promise<void> {
const doc$ = await this.service.getUserEventSummary();
doc$.subscribe(data => {
console.log(data);
})
}
}
Unfortunately, the documentation isn't as clear or in depth as it could be because Firebase 9 is still so new but with time it'll surely improve.