title: How fetch data using foreign key in angular
body: <p>I was trying to implement Angular with Meteor and implemented that successfully. I was trying to get the data from my collections in this way.
  This is the code I used it to render my data in table</p>
  
  <pre><code>&lt;ng-container *ngFor="let product of products;let i=index"&gt;
            &lt;tr &gt;
                &lt;td&gt;{{ i+1}}&lt;/td&gt;
                &lt;td&gt;{{product.product_name}}&lt;/td&gt;
                &lt;td &gt;{{product.product_category_id 
                    | fetch_product_category}}&lt;/td&gt; // Approach 1
                &lt;td &gt;{{getProductCateogry(product.product_category_id)}} 
                &lt;/td&gt; // Approach 2
                &lt;td&gt;{{product.product_brand}}&lt;/td&gt;
                &lt;td&gt;{{product.created_at | date}}&lt;/td&gt;
              &lt;tr/&gt;
   &lt;/ng-container&gt;
  </code></pre>
  
  <p>Getting the data in Product Name And Brand but not in Product category Id.
  Product Category is a different collection has category Name in it.
  For Getting Data in Product Category I used these approaches
  Approach 1 - Angular Pipe ( I have used this in Angular)
  This is the pipe class I have created</p>
  
  <pre><code> @Pipe({
        name: 'fetch_product_category'
       })
    export class FetchProductCategory implements PipeTransform {
       private productCategory: any;
  
      transform(catId: string): string {
      var productCatListingSubs = 
  
  MeteorObservable.subscribe('fetch_product_category_based_on_categoryid',
    catId).subscribe( =&gt; {
          var productCategory = 
          ProductCategory.find({"product_category_id":catId}).fetch();
           console.log("Products Category  :",this.productCategory); // Getting Data Here
        });
          console.log("Products Category  :",this.productCategory); // Data not returned here
          return this.productCategory;  
      }
    }
  </code></pre>
  
  <p>Approach 2 : Fetching data based on Subscription</p>
  
  <pre><code>getProductSubcategory(catId){
     var name;
     console.log("Products Category"catId);
     this.productCatListingSubs = MeteorObservable.subscribe('fetch_product_category_based_on_categoryid',catId).subscribe( =&gt; {
        var productCategory = ProductCategory.find({"product_category_id":catId}).fetch();
         console.log("Products Category",productCategory);
         name = productCategory[0].product_category_name;
         console.log("name  :",name); 
       });
       return name;
   }
  </code></pre>
  
  <p>In Second Approach, data is there but there is infinite loop in console for this.
  I am using METEOR@1.8.0.1 and ANGULAR@7.1.1
  This is the issue for long time now &amp; not able to resolve this, Any help would be greatly appreciated.</p>