I have a page in which I display a list of products contained inside an order, and a button to add more products. I must keep this structure, which is working perfectly fine when I’m opening an existing order. However, when I’m trying to create a new order, the condition inside the ngIf is undefined, and so the check fails.

What’s the best way to handle such a case, to make it so that the definition of the value products never fails or is there a better way to do it? In any case, how can I make it so that even if the order doesn’t have products (or they’re undefined), the div gets shown anyway?

<div
  *ngIf="
    order
      | map: 'product'
      | products
      | ngrxPush as products
  "
>
<!-- Order info -->
</div>