To retrieve a document in Firestore, first you must add the FirebaseTS library to your project. Follow this tutorial to learn how to add FirebaseTS.
Retrieving Data from Cloud Firestore Database
Learn how to retrieve a document from the Firestore database using FirebaseTS in Angular applications.
Once you have added FirebaseTS, you are set to go!
In this section, we will be retrieving documents from Firestore using the getDocument() and the listenToDocument() methods from the FirebaseTSFirestore Class.
Here is the definition of the getDocument() method.
getDocument()
Retrieves the document data once, every time it is called.
public getDocument(
params: {
path: string [],
onComplete?: (result: DocumentSnapshot) => void,
onFail?: (err: any) => void
}
): Promise<DocumentSnapshot>;
path - is an string array that points to the location of the document in Firestore.
Every even position of the array represents a collection and every odd position represents a document.
[
"UserCollection",
"User1Document",
]
onComplete?: result => void - is an optional callback function that allows you to handle logic after the task is completed.
onFail?: err => void - is an optional callback function that allows you to handle logic when it was not able to get the document.
1. Import the FirebaseTSFirestore class.
import { FirebaseTSFirestore } from 'firebasets/firebasetsFirestore/firebaseTSFirestore';
2. Declare and initialize a FirebaseTSFirestore object.
private firestore: FirebaseTSFirestore;
constructor(){
this.firestore = new FirebaseTSFirestore();
}
3. Call the getDocument() method.
this.firestore.getDocument(
{
path: [
"UserCollection",
"User1Collection"
]
}
);
4. Get the data using the onComplete parameter.
this.firestore.getDocument(
{
path: [ ... ],
onComplete: result => {
let data = result.data();
let name = data.name;
let age = data.age;
}
}
);
Here, we stored the data of the document to a variable call data. Then we got the name and age property from the data object.
Handling code on fail
Sometimes you may want to do something when it fails to get the document. You can add the optional parameter onFail.
this.firestore.getDocument(
{
path: [ ... ],
onComplete: result => { ... },
onFail: err => {
// Codes gets executed on fail.
alert("Failed to retrieve document");
}
}
);
listenToDocument()
Continuously retrieves the document's data. The method will attached a listener object to the document and retrieve the document data once at the beginning. When there is a change made to the document, it will get called again automatically.
public listenToDocument(
params: {
name: string,
path: string [],
onUpdate: (result: DocumentSnapshot) => void
}): void
name - is a string that we give to the listener. It helps the FirebaseTS package keep track of all the listeners that are in session within the app.
path - is an string array that points to the location of the document in Firestore. If we put a path to a collection, it will throw an error because the method only listens to a document.
Every even position of the array represents a collection and every odd position represents a document.
[
"UserCollection",
"User1Document",
]
onUpdate: result => void - is a callback function that returns an result object that contains the document information. It gets called once at the beginning to get the document and then it will get called again when it detects a change in the document.
How to use
this.firestore.listenToDocument(
{
name: "USER_LISTENER",
path: [
"UserCollection",
"User1Collection"
],
onUpdate: result => {
let data = result.data();
}
}
);
How to use
