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;  
    }
  }

2. 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](mailto: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.

Are you sure it’s an infinite loop? I think it might be that your function is getting constantly called. If you need to reflect an observable in the view, consider using an async pipe.

Thanks for reply
In second approach data is there but loop running infinite.
If you checked the attached code in Approach 1, its running fine but transform method not returning any data.