title: value from Observable within Observable using angularfire2 firestore
body: <p>I am trying to query a sub-collection if exists while querying for <code>document</code> from <code>collection</code>. My first query <code>returns/maps</code> data properly but when I try to query the <code>subcollection</code> it will be stored as <code>observable</code> within the <code>Observable&lt;data&gt;</code>. Below is what I have/tried so far.</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>availableCategoriesCollection: AngularFirestoreCollection&lt;Category&gt;;
  availableCategories$: Observable&lt;CategoryId[]&gt;;
  lstCategories: Observable&lt;any&gt;;
  
  this.availableCategoriesCollection = this.httpDataService.getAllCategories();
  this.availableCategories$ = this.availableCategoriesCollection.snapshotChanges().map(data =&gt; {
    return data.map(record =&gt; {
      const rec = record.payload.doc.data() as Category;
      const cId = record.payload.doc.id;
      return {cId, ...rec};
    });
  });
  
  this.lstCategories = this.availableCategories$.map(data =&gt; {
    return data.map((rec: CategoryId) =&gt; {
      //if a category has subcategory then query the document again for subcollection
      if (rec.hasSubCat) {
        return this.httpDataService.getSubCategory(rec.cId).snapshotChanges().concatMap(d =&gt; {
          return d.map(r =&gt; {
            const arr: any = {};
            arr.id = r.payload.doc.id;
            arr.itemName = (r.payload.doc.data() as Category).categoryName;
            arr.category = rec.categoryName;
            return arr;
          });
        });
      }else {
        const arr: any = {};
        arr.id = rec.id;
        arr.itemName = rec.categoryName;
        arr.category = 'All';
        return arr;
      }
    });
  });
  </code></pre>
  
  <p>When I look into the <code>lstCategories</code> value, the documents that have <code>subcollection</code> will be returned as <code>Observable</code> and the ones which don't have <code>subcollection</code> returns proper <code>data</code> with <code>id</code>,<code>itemName</code> and <code>category</code>. Something like below:</p>
  
  <blockquote>
    <p>(9) [{…}, Observable, Observable, {…}, {…}, {…}, {…}, {…}, Observable]</p>
  </blockquote>
  
  <p>How can I properly subscribe to the <code>sub-query</code>? What am I missing here?</p>