Sample Firebase - AngularFire2 with Angular CLI Application - Clearly Innovative | Web and Mobile DevelopmentClearly Innovative | Web and Mobile Development

The name is shortened to “afwithngcli” for the project if you are wondering what that is all about.

This post is based on a question from StackOverflow: Nested Observables in Angular2 using AngularFire2 not rendering in view


Full Source Code of Working Example


This is a continuation of my investigation of Firebase as a datastore for client applications here at Clearly Innovative Inc. We do a fair bit of Angular work and have been working with Angular2 with Ionic2 so Firebase pairs very well with the technology stack.

This specific application was built to demonstrated the nested AngularFire2 functionality demonstrated in this youtube video: https://youtu.be/ngnSOTSS8Q8?t=1h6m37s

What we have is the following data structure

And we are trying to get a result that looks like this

So this is how we access the data using AngularFire2

First we get the initial list of items af.list('/items') then we loop through the items and extract the item metadata using the $key  from the current item as the part of the path for the next AngularFire2 query.

The second query  af.object('/items_meta/' + item.$key) will add a new property to the original item and that property will be another observable.

You access the observable(s) in the UI by using the async pipe which will update the data in the UI as the data changes in Firebase. The html code for the UI looks something like this.

 

If you notice this code (item.metadata | async)?.stockPrice , we are using the elvis operator to make sure that the observable has some data in it before trying to access the properties moreData  and  stockPrice . I have to believe there is a cleaner way to code that up, but this is what I have for now.

Please provide feedback if you have any.

Additional Content & Links