Using FirebaseObjectObservables in Angular2+ Apps

For those of you who have stuck with Angular throughout it’s somewhat Turbulent development ( I mean it is a Javascript framework people…) , many would have come across a popular backend solution Firebase, which appears to integrate seamlessly with Angular Applications and is coincidentally owned by Google. Of course, Angular comes loaded with many practices and ideologies which I subscribe to ( I deserve a clap for that alone) , one of those being the concept of Observables.
Observables can be quite abstract at first to many, even those who may have had to implement software which followed that design pattern in order to pass some courses at University. Regardless, I will attempt to give a quick overview of how they can be used within Firebase to make life a bit simpler.
AngularFire is a fantastic library which wraps a lot of Firebase’s more basic methods, so it works well with a prototype, but as your application scales things can become a bit tricky and the documentation is a bit lacking in that regard I feel…
So… Assuming you’ve created an Angular App and installed AngularFire2 using yarn (you don’t need to but come on.. it’s 2017). Let’s Go.
Step 1
Create a service which we will use to handle the Firebase Authentication requests. Using angular-cli
ng g service my-firebase-auth-serviceThis should go ahead and generate a service component which we will later inject into our component. Let’s go ahead and flesh out that service.
my-firebase-auth-service.ts
In this service we create an Auth Observable of type FirebaseAuth and subscribe to it so we can get the FirebaseAuthState. In the documentation this is normally handled using promises, which is fine but for our use case an Observable is more appropriate and we will see why later.
Step 2
Create a service which we will use to handle the Firebase queries.
ng g service my-firebase-servicemy-firebase-service.ts
Here we inject that AuthService to be used for our queries, and that aforementioned Observable makes it far easier to accomplish this as we can now directly access the id using this.auth.id which will make the next step far less verbose to access our FirebaseObject.
Step 3
And now for the meat of the matter and that is accessing and passing our FirebaseObjectObservable. Now for those of you who have come across this class before, using the documentation we often see these Objects unwrapped using the async pipe in our template, but what about properties, values or keys stored in Firebase that won’t be directly used in the front-end? Here’s where a nifty getIndex function comes in.
Above we pass in the Key for our index as a string and then return a FirebaseObjectObservable with that queried child index…seems straightforward right? Here’s the fun part tho…
Step 4
In our component we want to be able to unwrap that index , so here I am doing just so.
So here we retrieve an index which we want (I prefer to define my actions in some other file and export it, in order to avoid magic strings which can be highly problematic and a pain to debug) , and then subscribe to it so that we may use it later on in some other function. Important that we access the value via the $value property and the $key for the key property — which is akin to the famous snapshot.val().
I really wrote this article because I could not find a single thing on google about it… so either I don’t know how to write Google queries (fundamental skill for any programmer worth their salt) or I actually helped someone, you be the judge.
