Fetching data using Id in Angular

Hi Everyone,

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

 <ng-container *ngFor="let product of products;let i=index">
          <tr >
              <td>{{ i+1}}</td>
              <td>{{product.product_name}}</td>
              <td >{{product.product_category_id | fetch_product_category}}</td> // Approach 1
              <td >{{getProductCateogry(product.product_category_id)}}</td> // Approach 2
              <td>{{product.product_brand}}</td>
              <td>{{product.created_at | date}}</td>
            <tr/>
            </ng-container>

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

  1. Approach 1 - Angular Pipe ( I have used this in Angular)

This is the pipe class I have created

@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( => {
        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;  
    }
  }
  1. Approach 2 : Nested Subsriptions fetching data based on Subscription
getProductSubcategory(catId){
   var name;
   console.log("Products Category"catId);
   this.productCatListingSubs = MeteorObservable.subscribe('fetch_product_category_based_on_categoryid',catId).subscribe( => {
      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;
 }

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 & not able to resolve this, Any help would be greatly appreciated.