Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

firebase firestore read a specific document in angular

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

like image 786
Nipuna C Avatar asked Oct 08 '19 19:10

Nipuna C


People also ask

How do I read a specific document in angular FireStore?

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.

How do I use Cloud Firestore with angular 2+?

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:

How do I connect to Firebase in angular?

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.

What type of database is FireStore?

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.


1 Answers

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

like image 65
Reza Avatar answered Sep 30 '22 12:09

Reza