Read a document from Firestore Database in Angular

Firestore is a commonly used database for Mobile, PWA and many more real time apps. Reading data from Firestore sometime becomes time taking for beginners. I will here explain how you can read a document from Firestore Database in Angular.

I am assuming you have created a Firebase Application and have done the Firebase Configurations. If not, click here to create.

Follow the steps:

1. Install @angular/fire/firestore

Run command npm i @angular/fire/firestore to install Firestore module in Angular project. Once installed, add that into the app.module.ts file.

2. Get document in component

Import Firestore package in component:

import { AngularFirestore } from "@angular/fire/firestore";

Create Instance in Constructor:

private firestore: AngularFirestore

Apply code to fetch data: (Note: Replace collectionName and documentId with your real collection name and document id before running the code)

this.firestore
      .collection(`collectionName`)
      .doc(`documentId`)
      .ref
      .get()
      .then(data => {
        console.log(data.data())
});

You will see your document are displayed at Browser Console.

Conclusion

That’s it. Write me up for any query you are having. In this article we learnt about how to read a document from firestore database in Angular. Firestore is a NoSQL database mainly used by mobile apps.