How to Retrieve a Collection and Subcollection in Firebase with AngularFire

Описание: Learn how to efficiently query a Firebase collection and its subcollection with `AngularFire` in your Angular application, handling roles and observables.
---
This video is based on the question https://stackoverflow.com/q/68938941/ asked by the user 'J4N' ( https://stackoverflow.com/u/397830/ ) and on the answer https://stackoverflow.com/a/68948342/ provided by the user 'J4N' ( https://stackoverflow.com/u/397830/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to make a query that retrieve a collection and a subcollection in firebase with angularfire?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering Firebase Queries with AngularFire: A Guide to Retrieving Collections and Subcollections

When working with Firebase for your Angular applications, it's common to encounter scenarios where you need to retrieve a collection along with its subcollection. This can become slightly complex, especially when you need to monitor updates in real-time. In this blog, we will tackle how to efficiently fetch a collection of user profiles and their respective roles from Firebase Firestore using AngularFire.

The Challenge: Understanding the Data Structure

Before we dive into the solution, let's take a closer look at the data structure in our Firebase database. In our case, we have a profiles collection that looks something like this:

[[See Video to Reveal this Text or Code Snippet]]

Profiles: Contains user details like displayName, email, etc.

Roles: A subcollection under each profile to manage access rights and user roles, allowing different write permissions compared to the primary profile data.

The Requirement

Our primary goal is to retrieve user profiles along with their corresponding roles, specifically checking for the presence of roles such as admin or user. This information should be available in real-time to reflect any changes made by users.

The Solution: Implementing Reactive Queries with AngularFire

To efficiently manage this, we can use a combination of AngularFire services along with RxJS operators. Here’s how to set up the query:

Step 1: Retrieving Profiles

Start by injecting AngularFirestore into your component and retrieving the user profiles. Use the valueChanges() method to maintain a subscription to the data:

[[See Video to Reveal this Text or Code Snippet]]

valueChanges({ idField: 'uid' }): This retrieves all profiles and adds the document ID as a field named uid.

Step 2: Fetching Roles for Each Profile

Next, we need to enrich our profiles with the roles assigned. We will use switchMap to switch to another observable that fetches roles for each user:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Code

switchMap: Takes the latest value from the profiles observable and switches to a new observable that retrieves roles for each profile.

map: Transforms the roles documents to extract their IDs.

tap: A handy operator where we can perform side effects like logging or updating without altering the data stream.

combineLatest: Combines all the role observables into one stream. Note: If you encounter deprecation warnings for combineLatest, look into switching to combineLatestWith in RxJS V7.

Step 3: Displaying Data

Now that we have structured data containing both profiles and their respective roles, you can easily display this information in your Angular template using *ngFor. For example:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

In this post, we've explored how to retrieve a collection and its subcollection in Firebase using AngularFire. This approach ensures that your data remains reactive and up-to-date, which is crucial for dynamic web applications. By cleverly utilizing observables and reactive programming principles, you can efficiently manage data in your Angular projects.

Stay tuned for more insights on working with Firebase in your Angular applications!