title: Looking up a reference from a document field from the template in Ionic/Angular with AngularFire2/Firestore
body: <p>I am working on an Ionic 3 App (Uses Angular 4). I am using Angularfire2 to interact with my Firestore database. Currently, I am retrieving a document as an observable and displaying it's fields in my template. </p>
  
  <p>My problem is one of my fields in the document is a reference to another document (categories). from the template, I'm trying to do something like this:</p>
  
  <p><code>&lt;ion-badge&gt;{{ getCategory( (pro.element | async)?.category ) }}&lt;/ion-badge&gt;</code></p>
  
  <p>which is calling a function in my provider that looks like this:</p>
  
  <pre><code>getCategory(ref:AngularFirestoreDocument&lt;Category&gt;){
     if(ref){
       ref.valueChanges().subscribe(val =&gt;{
         return val.name;
       });
     }
  }
  </code></pre>
  
  <p>I have no idea if this is an appropriate/sustainable way to retrieve the reference document, as I have looked all over and not found any detailed documentation covering this. When I log this it seems to iterate over thousands of times, returning a <code>DocumentReference</code> Object, but I get the error that <code>valueChanges()</code> isn't a function. </p>
  
  <p>Any direction on best practice in this circumstance would be greatly appreciated. </p>
  
  <p>Thank you</p>