I want to read a specific document in Firebase Firestore using AngularFire.
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore , AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { async } from 'q';
@Component({
selector: 'app-read-more-page',
templateUrl: './read-more-page.component.html',
styleUrls: ['./read-more-page.component.scss']
})
export class ReadMorePageComponent implements OnInit {
postCatagory: string;
databaseName: any;
uuid: string;
documentObject:any; //real docum
//observables
items: Observable<any[]>;
doc : AngularFirestoreDocument<any>
post : Observable<any>;
constructor(private route: ActivatedRoute , private afs: AngularFirestore ) {
this.databaseName = this.route.snapshot.paramMap.get('category');
this.items = afs.collection(this.databaseName).valueChanges();
}
ngOnInit() {
if(this.route.snapshot.paramMap.get('uuid') != null){
//when id is not null
this.databaseName = this.route.snapshot.paramMap.get('category');
this.uuid = this.route.snapshot.paramMap.get('uuid');
console.log("UUID " , this.uuid);
console.log("category " ,this.databaseName);
//read data from collection
//read post
this.doc = this.afs.doc(`${this.databaseName}/${this.uuid}`);
}
}
}
${this.databaseName}/${this.uuid}
is the document I wanted to read. But as the example in firestore docs, we could easily read all the documents from the collection. But I need to retrieve only the exact document.
I'm still a beginner so I would be much thankful if you could provide some beginner-friendly content
To read a specific document in your Firestore database, you need to import AngularFirestoreDocument into the service where you’re going to be using it. To query a document, you’ll need the collection name and the id to create a document path. Use this document path inside .doc () This will return only the data and no metadata.
Here’s we’ll cover the very basics of using interacting with Cloud Firestore in an Angular 2+ project. You’ll need to have a Firebase account and to enable the new database. First, install the needed Firebase packages ( firebase & angularfire2) into your Angular project:
To connect your Angular app up with your Firebase database, locate your Firebase config file. You can do this via your project’s console. Navigate over to Project settings and scroll down. If you haven’t already done so, you’ll need to register a new app against the database via the Add app button.
Cloud Firestore is a NoSQL, document-based database. At the root of the database are collections (e.g.: todos, users, files) and collections can only contain documents.
const docRef = afs.collection('collectionName').doc('documentId');
it will give you document reference, then you can subscribe to snapshotChanges()
or call data()
or other methods
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With