In the component I have a simple table were one of the columns calls a function getOrderItems() to get order corresponding items:

<p-table
  [value]="orders$()"
  [tableStyle]="{ 'min-width': '50rem', 'margin-top': '16px' }"
>
  <ng-template pTemplate="header">
    <tr>
      <th>Id</th>
      <th>Contact</th>
      <th>Total</th>
      <th>Status</th>
      <th>Item</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-order>
    <tr>
      <td>{{ order.id }}</td>
      <td>{{ order.contact }}</td>
      <td>{{ order.total }}</td>
      <td>{{ order.status }}</td>
      <td>{{ getOrderItems() }}</td>
    </tr>
  </ng-template>
</p-table>

Here is the getOrderItems() function:

getOrderItems() {
    const orderItems = this.ordersService.orderItems();

    console.log(orderItems);
    return orderItems;
  }

Finallt here is the function inside ordersService:

orderItems() {
    let orderItems: OrderItem[] = [];
    this.databaseService
      .getDatabase()
      .orderItem.find()
      .exec()
      .then((doc) => {
        orderItems.push(doc);
      })
      .catch((e: RxError) => {
        return Promise.reject(
          'Error while looking for order items: ' + e.message,
        );
      });

    return orderItems;
  }

The issue I’m getting infinite loop because of getOrderItems() function and I have no idea why?